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

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

不管是日常開發還是面試，跨域和同源策略都是一個老生常談的問題。基本上每一個新手成長過程中都會遇到下面讓人抓狂的經典報錯：No 'Access-Control-Allow-Origin' header is present on the requested resource??????

image.png

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

image.png

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

image.png

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

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

禁用方式也很簡單，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/

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

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

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

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

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

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

image.png

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

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

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

image.png

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

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

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

image.png

image.png

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

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

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

還是以實際開發場景為例，我們需要在一些鼠標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;
}

這個代碼需要優化調試的時候，我們往往要去控制臺element一項中去尋找input或者div元素，然后使用箭頭定位到元素找到他的class樣式。

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

image.png

很多開發者麻了的同時，只能硬著皮頭去代碼里一點點去翻。其實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特性。