產品經理可以藉助Chrome控制台來做什麼

05-03

今天來聊一聊功能十分強大的 Chrome 控制台~ 我第一次使用Chrome瀏覽器是在2011年讀研一的時候，老師在課上強烈的安利，回去就安裝了Chrome，的確又快又簡潔。而第一次接觸Chrome控制台（DevTools），是在2014年做wap頁面產品的時候，站在開發座位前，看他在Chrome里演示移動端的頁面給我確認。

當時就覺得好神奇！回去之後自己也研究了下，對於PM來說，雖然不會像開發那樣使用控制台調試代碼，但是也有很多實用的功能！一起來看看吧~

首先，Chrome如何打開控制台？

Mac用戶使用快捷鍵 Cmd+Option+I，或者瀏覽器右上方更多功能>更多工具>開發者工具。

可以用來做什麼？

一、模擬手機上的WAP界面

使用控制台可以模擬網頁在多種型號的手機及微信上的展示效果，如果需要測試線上問題、上線前的測試和驗收、截取wap頁面等情況下，無需再在手機瀏覽器中打開網頁，直接在Chrome里搞定，而且可以測試多種機型。

首先點擊控制台的位置1，表示切換到手機展示模式，然後再右側位置2處，將控制台的位置調到兩側，方便頁面展示，圖中我選擇了右側。

設置好了之後，打開知乎wap 頁面，知乎 - 與世界分享你的知識、經驗和見解，顯示效果如下圖。點擊位置1可以切換不同的手機型號，點擊位置2可以配置List里的手機型號。

配置手機型號的頁面，也支持自定義設備，是不是很強大~！

二、頁面元素

1、修改文案，測試一行文案的字數。點擊控制台左上方的選擇圖標，或者在頁面上右擊菜單>點擊審查元素後，頁面的元素可以被選擇。如圖，Hover到所需文案，並點擊，在控制台會高亮對應的元素，雙擊高亮區域，就可以編輯啦。你所輸入的內容，在頁面上會實時同步修改。所有頁面元素的修改，在刷新瀏覽器之後，頁面會恢復。

2、編輯文案/元素的顏色/大小等，如圖，選擇文案後，在控制台右側Styles里，可以編輯文本的大小Font-size、顏色Color，自己測試效果。

3、保存禁止轉載的文案或圖片。有時候網站會限制用戶複製文本或保存圖片，直接在頁面上操作是無法保存的，這時候使用控制台就發揮作用啦。比如下圖，作者的答案設置了禁止轉載，只需要利用控制台選中對應元素，在控制台里就可以複製啦。注意涉及版權的內容不要濫用哦。

4、取色和保存。點擊Styles里的color設置，打開顏色面板，再點擊取色工具(位置1)，可以在取頁面任何的顏色(位置2)，取色的同時也會顯示顏色代碼。點擊位置3的加號，就可以保存到色板里。以後遇到喜歡的顏色，都不會錯過啦。

三、測試網路訪問速度

在控制台>Network里，可以選擇訪問頁面的網路環境，測試不同環境下頁面的打開速度、載入情況，比如在下圖模擬在無網路的情況下，頁面展示情況。

如圖，可以切換不同的網路，比如3G、4G、GPRS等等，也可以自定義網路環境。

四、賦能插件

有的插件利用控制台作為自己的內容區，例如，如果有爬蟲需求的小夥伴可以嘗試 Web Scraper，插件地址 http://t.cn/RSXFAKQ，如圖，第一個爬蟲抓的是豆瓣電影排名前

250的電影，第二個抓的是知乎上所有關注自己的用戶。具體的使用方法這裡就不說啦，有興趣的可以自己研究一下；

下面是另一個插件 AdBlock，可在控制台看到頁面上攔截的廣告。

以上四點僅僅是Chrome控制台九牛一毛的功能，感興趣的小夥伴可以去查看官方文檔，地址http://t.cn/RfyjYCU。

————————正文完—————————

結尾小小補充：本文裡面所給的鏈接都是短鏈接用urlShorter生成的，urlShorter在6.3已更新到了 V1.1.0，一是加了谷歌的短鏈服務，若判斷為海外則優先使用谷歌短鏈，二是進行了國際化處理，總之，海外的朋友可以愉快地使用啦。插件地址：http://t.cn/RaEykTX。(*^__^*)