5 個 Chrome 超實用開發(fā)功能詳解?。。∧銓W(xué)會了嗎？

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

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

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

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



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

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

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

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

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

1、window 步驟:
a. 新建一個chrome快捷方式，右鍵“屬性”。
b. “快捷方式”選項卡里選擇“目標(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/
一行代碼即可，是不是又簡單又實用呢，短短一兩分鐘，我們就可以快速解決跨域，完成日常開發(fā)需求,再也不用擔(dān)心一堆紅色報錯啦！??????

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

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

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



三、自定義瀏覽器網(wǎng)速，快速定位接口異步問題
我們在日常開發(fā)中，經(jīng)常會有這樣一些場景故事：

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






客戶說我這里打開頁面很慢，白屏很長時間，需要優(yōu)化。我們自己打開頁面的時候，因為是本地資源，加載無延遲，就會說沒問題，你看很快啊，頁面很 nice，不用優(yōu)化！

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

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

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



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

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

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

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

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

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

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


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

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

「控制臺 console 日志」保留：



「控制臺 network 日志」保留：

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

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

作者：掘金干貨君

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



作者：掘金干貨君

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

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