5 個(gè) Chrome 超實(shí)用開發(fā)功能詳解?。?！你學(xué)會(huì)了嗎？

點(diǎn)擊下方“前端開發(fā)愛好者”，選擇“設(shè)為星標(biāo)”

第一時(shí)間關(guān)注技術(shù)干貨！
哈嘍,大家好 我是xy。今天給大家分享5個(gè)chrome簡單實(shí)用的日常開發(fā)功能詳解，趕快解鎖讓你提升更多效率

眾所周知，chrome是目前市面上一騎絕塵，占有絕對(duì)領(lǐng)導(dǎo)地位的瀏覽器。其強(qiáng)大的功能和生態(tài)圈，不但驚艷了很多用戶，也讓很多開發(fā)者愛不釋手。不過不少開發(fā)者(「尤其是初中級(jí)開發(fā)者」)使用chrome還是停留在F12打開控制臺(tái)查看log、檢查元素或者debug打斷點(diǎn)階段，其實(shí) chrome 的強(qiáng)大的功能遠(yuǎn)遠(yuǎn)超過我們的想象。本文針對(duì)這種情況，結(jié)合實(shí)際業(yè)務(wù)開發(fā)場(chǎng)景，為初中級(jí)前端開發(fā)者整理了一些在日常開發(fā)中可以大幅提高效率但又不容易被發(fā)掘的 chrome 特性。幫助大家提高日常效率，節(jié)省出更多的時(shí)間「學(xué)」「習(xí)」??！

一、關(guān)閉同源安全模式，一秒解決所有跨域問題
不管是日常開發(fā)還是面試，跨域和同源策略都是一個(gè)老生常談的問題?；旧厦恳粋€(gè)新手成長過程中都會(huì)遇到下面讓人抓狂的經(jīng)典報(bào)錯(cuò)：No 'Access-Control-Allow-Origin' header is present on the requested resource



怎么改 js 都代碼都改不好，快要崩潰。

就算是去問了度娘，度娘告訴我們這是跨域問題，需要配置請(qǐng)求 headers 頭來解決，我們還是一臉懵逼：什么是反向代理？還要找后端解決？說的不好被后端看出來水平很菜怎么辦？

其實(shí)，跨域是僅僅存在瀏覽器端，為了安全策略而采用的一種方案。如果是僅僅是本地調(diào)試的話，我們完全可以把這個(gè)安全策略禁用掉，讓所有的跨域限制都放開，可以在 chrome 中更加自由的翱翔！

ps: 這種方案只能僅僅用在本地調(diào)試功能和需求，不需要很多配置就可以快速開發(fā)好前端功能，正式上到測(cè)試環(huán)境或者生產(chǎn)環(huán)境還是要采用反向代理等策略哦~

禁用方式也很簡單，window 的操作步驟分別只有 2 步，mac 更是只需要一行命令行即可。

1、window 步驟:
a. 新建一個(gè)chrome快捷方式，右鍵“屬性”。
b. “快捷方式”選項(xiàng)卡里選擇“目標(biāo)”，添加  --args --disable-web-security --user-data-dir

2、mac 步驟:
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --ignore-certificate-errors --user-data-dir=/Users/${此處完成用戶名}/MyChromeDevUserData/
一行代碼即可，是不是又簡單又實(shí)用呢，短短一兩分鐘，我們就可以快速解決跨域，完成日常開發(fā)需求,再也不用擔(dān)心一堆紅色報(bào)錯(cuò)啦！??????

二、無痕模式實(shí)現(xiàn)多賬號(hào)同時(shí)登陸
很多后臺(tái)管理系統(tǒng)的日常開發(fā)過程中，我們經(jīng)常遇到這樣的問題：系統(tǒng)有多角色多賬號(hào)，且在本地調(diào)試開發(fā)的時(shí)候往往會(huì)遇到需要同時(shí)登錄多個(gè)賬號(hào)調(diào)試需求的情況。比如：

開發(fā) OA 工作流審批。從發(fā)起審批到部門領(lǐng)導(dǎo)總經(jīng)理，一層層流程我們開發(fā)的時(shí)候，得需要挨個(gè)登錄退出切換賬號(hào)，才能完成需求開發(fā)，登錄頁面看的快吐了。
多賬號(hào)調(diào)試。我們本地自測(cè)的時(shí)候，往往由于賬號(hào)數(shù)據(jù)問題，需要看多個(gè)賬號(hào)的數(shù)據(jù)來渲染頁面，但是在單端登錄的情況下，一個(gè)賬號(hào)登錄完了，在登錄另一個(gè)賬號(hào)就需要先退出，或者踢掉之前的賬號(hào)，來回切換苦不堪言。
以前我們不想來回切換的時(shí)候，就會(huì)再去打開一個(gè)新的其他瀏覽器（甚至還見過找一個(gè)新電腦...）。這樣解決兩個(gè)賬號(hào)還好，多個(gè)賬號(hào)就得找多個(gè)不同瀏覽器，治標(biāo)不治本...

那么有沒有更好更快的做法呢? 有！那就是無痕模式！我們只需要在 chrome 任務(wù)欄里輕輕右擊選中打開新的無痕式窗口，就可以得到一個(gè)干凈的，不被其他頁簽干擾的'全新'的瀏覽器！想同時(shí)登陸多少賬號(hào)都可以啦！



三、自定義瀏覽器網(wǎng)速，快速定位接口異步問題
我們?cè)谌粘ｉ_發(fā)中，經(jīng)常會(huì)有這樣一些場(chǎng)景故事：

測(cè)試提了一個(gè) bug：「打開 XXX 頁面數(shù)據(jù)顯示不正確」。我們拿到問題單，在本地瘋狂刷新頁面，怎么刷數(shù)據(jù)都是對(duì)的。在測(cè)試人員的堅(jiān)持和截圖/錄屏實(shí)錘下，于是乎我們開始拋出經(jīng)典 debug 方法：你重啟電腦試試！






客戶說我這里打開頁面很慢，白屏很長時(shí)間，需要優(yōu)化。我們自己打開頁面的時(shí)候，因?yàn)槭潜镜刭Y源，加載無延遲，就會(huì)說沒問題，你看很快啊，頁面很 nice，不用優(yōu)化！

有經(jīng)驗(yàn)的前端開發(fā)都知道，其實(shí)很多問題偶現(xiàn)或者某些特定機(jī)器、特定環(huán)境下出現(xiàn)，大部分都是因?yàn)槭蔷W(wǎng)速、配置、代理等等一系列額外環(huán)境因素造成的，其中最常見的就是網(wǎng)速造成的異步加載問題。測(cè)試的電腦往往因?yàn)閴簻y(cè)力度大、或者網(wǎng)速占用率較高等原因，會(huì)更容易出現(xiàn)一些異步加載問題。

此外，由于一些客戶特殊的環(huán)境，往往網(wǎng)速很慢，我們開發(fā)的時(shí)候，一般會(huì)有較高的寬帶配置，很難復(fù)現(xiàn)客戶問題。

那么，我們可以不可以也給項(xiàng)目營造一個(gè)苛刻的周邊環(huán)境，讓很多問題可以更容易復(fù)現(xiàn)呢？答案就是瀏覽器的自定義network速率。話不多說，直接上圖：



可以看到，我們不但可以選擇無限制、高速3G、低速3G、離線模式，還可以通過add自定義想要的網(wǎng)速模式。利用這個(gè)功能，我們可以更快定位問題，更好的做首屏優(yōu)化了！

ps:除了網(wǎng)速可以限制，我們還可以對(duì) cpu 運(yùn)行速度加以限制，用來更好的復(fù)現(xiàn)問題，cpu 的限制就留給各位自己去查咯~

四、控制臺(tái)自動(dòng)模擬鼠標(biāo) hover、focus 事件
還是以實(shí)際開發(fā)場(chǎng)景為例，我們需要在一些鼠標(biāo)hover懸浮或者input點(diǎn)擊聚焦focus的情況下改變一些樣式,如：

<input class="demo-input" />
.demo-input:focus {
    border: 1px solid #000000;
}

<div class="demo-div" />
.demo-div:hover {
    border: 1px solid #000000;
}
這個(gè)代碼需要優(yōu)化調(diào)試的時(shí)候，我們往往要去控制臺(tái)element一項(xiàng)中去尋找input或者div元素，然后使用箭頭定位到元素找到他的 class 樣式。

但是我們會(huì)比較尷尬的發(fā)現(xiàn)，我們聚焦或者懸浮元素的時(shí)候，就沒辦法去查看元素在控制臺(tái)的樣式代碼，當(dāng)我們?nèi)タ刂婆_(tái)查看代碼的時(shí)候，因?yàn)樵匾呀?jīng)失焦，就沒有辦法觸發(fā)聚焦或者懸??！

很多開發(fā)者麻了的同時(shí)，只能硬著頭皮去代碼里一點(diǎn)點(diǎn)去翻。其實(shí) chrome 這么強(qiáng)大肯定會(huì)考慮到這一點(diǎn)~我們此時(shí)可以利用控制面板中的模擬聚焦功能，直接貼圖：


五、log 和 network 日志保留
有一些頁面需要去通過查看log或者network接口自動(dòng)去調(diào)試需求的同時(shí)，代碼邏輯中還存在刷新動(dòng)作(window.location.reload)，這樣會(huì)導(dǎo)致一種情況就是我們辛辛苦苦在一點(diǎn)點(diǎn)查log或者network接口日志的時(shí)候，還沒來的及看完返回值，頁面啪一下就沒了，所有的 log 日志都被清空重載了，很是悲傷。。

我們可以利用 chrome 的preserve log將所有的日志一直保留下去~

「控制臺(tái) console 日志」保留：



「控制臺(tái) network 日志」保留：

這樣我們就再也不用擔(dān)心日志消失啦！

本文轉(zhuǎn)載自：https://juejin.cn/post/7115345192055963656

作者：掘金干貨君

總結(jié)
我們此次一共介紹了**一鍵關(guān)閉跨域** 、_「log 和 network 日志保留」、「自定義瀏覽器網(wǎng)速」_、 「控制臺(tái)自動(dòng)模擬鼠標(biāo) focus 事件」、「無痕模式實(shí)現(xiàn)多賬號(hào)同時(shí)登陸」 5 種實(shí)用的 chrome 特性。



作者：掘金干貨君

歡迎關(guān)注微信公眾號(hào) ：前端開發(fā)愛好者

添加好友備注【進(jìn)階學(xué)習(xí)】拉你進(jìn)技術(shù)交流群