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

今天來聊一聊功能十分強大的 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,插件地址 t.cn/RSXFAKQ,如圖,第一個爬蟲抓的是豆瓣電影排名前

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

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

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

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

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


推薦閱讀:

最新Chrome打開F12調試工具怎麼沒有Resources選項了呢,是不是今後都不會有這個功能了?

TAG:Chrome使用技巧 | 產品經理 | 控制台 |