眾所周知，chrome是目前市面上一騎絕塵，占有絕對領導地位的瀏覽器。其強大的功能和生態(tài)圈，不但驚艷了很多用戶，也讓很多開發(fā)者愛不釋手。不過不少開發(fā)者(尤其是初中級開發(fā)者)使用chrome還是停留在F12打開控制臺查看log、檢查元素或者debug打斷點階段，其實chrome的強大的功能遠遠超過我們的想象。

一、關閉同源安全模式，一秒解決所有跨域問題

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

image.png

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

image.png

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

image.png

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

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

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

1、window步驟:

a. 新建一個chrome快捷方式，右鍵“屬性”。
b. “快捷方式”選項卡里選擇“目標”，添加  --args --disable-web-security --user-data-dir

image.png

2、mac步驟:

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --ignore-certificate-errors --user-data-dir=/Users/${此處完成用戶名}/MyChromeDevUserData/

一行代碼即可，是不是又簡單又實用呢，短短一兩分鐘，我們就可以快速解決跨域，完成日常開發(fā)需求,再也不用擔心一堆紅色報錯啦！??????

二、無痕模式實現多賬號同時登陸

很多后臺管理系統(tǒng)的日常開發(fā)過程中，我們經常遇到這樣的問題：系統(tǒng)有多角色多賬號，且在本地調試開發(fā)的時候往往會遇到需要同時登錄多個賬號調試需求的情況。比如：

1. 開發(fā)OA工作流審批。從發(fā)起審批到部門領導總經理，一層層流程我們開發(fā)的時候，得需要挨個登錄退出切換賬號，才能完成需求開發(fā)，登錄頁面看的快吐了。
2. 多賬號調試。我們本地自測的時候，往往由于賬號數據問題，需要看多個賬號的數據來渲染頁面，但是在單端登錄的情況下，一個賬號登錄完了，在登錄另一個賬號就需要先退出，或者踢掉之前的賬號，來回切換苦不堪言。

以前我們不想來回切換的時候，就會再去打開一個新的其他瀏覽器（甚至還見過找一個新電腦...）。這樣解決兩個賬號還好，多個賬號就得找多個不同瀏覽器，治標不治本...

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

image.png

三、自定義瀏覽器網速，快速定位接口異步問題

我們在日常開發(fā)中，經常會有這樣一些場景故事：

1. 測試提了一個bug：打開XXX頁面數據顯示不正確。我們拿到問題單，在本地瘋狂刷新頁面，怎么刷數據都是對的。在測試人員的堅持和截圖/錄屏實錘下，于是乎我們開始拋出經典debug方法：你重啟電腦試試！
2. 客戶說我這里打開頁面很慢，白屏很長時間，需要優(yōu)化。我們自己打開頁面的時候，因為是本地資源，加載無延遲，就會說沒問題，你看很快啊，頁面很nice，不用優(yōu)化！

image.png

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

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

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

image.png

image.png

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

• ps:除了網速可以限制，我們還可以對cpu運行速度加以限制，用來更好的復現問題，cpu的限制就留給各位自己去查咯~

四、控制臺自動模擬鼠標hover、focus事件

還是以實際開發(fā)場景為例，我們需要在一些鼠標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)化調試的時候，我們往往要去控制臺element一項中去尋找input或者div元素，然后使用箭頭定位到元素找到他的class樣式。

但是我們會比較尷尬的發(fā)現，我們聚焦或者懸浮元素的時候，就沒辦法去查看元素在控制臺的樣式代碼，當我們去控制臺查看代碼的時候，因為元素已經失焦，就沒有辦法觸發(fā)聚焦或者懸浮！

image.png

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

image.png

五、log和network日志保留

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

image.png

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

控制臺console日志保留：

image.png

控制臺network日志保留：

image.png

這樣我們就再也不用擔心日志消失啦！

總結

我們此次一共介紹了_一鍵關閉跨域_ 、_log和network日志保留、自定義瀏覽器網速_、 控制臺自動模擬鼠標focus事件、無痕模式實現多賬號同時登陸 5種實用的chrome特性。