?2016-2026 Matools All rights reserved,
粵ICP備17059708號
前端工程師大部分工作成果需要在瀏覽器中查看，使用 chrome 瀏覽器的頻率非常高。更好更優(yōu)雅地使用 chrome，將 chrome
配置成趁手的瀏覽器，將極大提升編程效率。本文將詳細(xì)介紹 chrome 瀏覽器的使用技巧
調(diào)試工具
下面介紹一些冷門但很有用的調(diào)試工具使用方法
【控制臺】
在 chrome 開發(fā)者工具中的任何一個面板下(除 console 面板外)，按住 esc 都可以在該面板下方新生成一個 console 面板
通常情況下，控制臺只提供單行輸入，可以用分號做分割符來執(zhí)行多個 javascript 語句；而如果需要多行代碼的話，可以通過組合鍵 shift+enter
來實(shí)現(xiàn)換行，在這種情況下代碼不會被立即執(zhí)行
【代碼片段】
chrome 在 sources 頁面提供 snippets 一欄，這里我們可以隨時編寫 Javascript
代碼，運(yùn)行結(jié)果會打印到控制臺。代碼是全局保存的，在任何頁面，包括新建標(biāo)簽頁，都可以查看或運(yùn)行這些代碼
【展開 DOM】
在 Elements 標(biāo)簽頁中，如果要查看一個元素中曾經(jīng)很深的子元素，可以按住 option 鍵，點(diǎn)擊元素，則元素的 DOM 結(jié)構(gòu)會完全展開
【搜索】
??在 elements 標(biāo)簽下使用 ctrl+f 搜索功能，可以使用 css 選擇器，如'.test'，可以搜索到所有類名為 test 的元素
【跳轉(zhuǎn)位置】
??在 elements 標(biāo)簽下，選擇元素節(jié)點(diǎn)，點(diǎn)擊右鍵菜單中的 scroll into view，可以滾動瀏覽器到元素所處位置
【快速定位】
在 Sources 標(biāo)簽下的代碼文件中，使用 ctrl + p 呼出搜索框，然后以 :行號:列號 的形式輸入并回車，可以將代碼快速定位到該位置
【刷新】
一般地，人們對于刷新的印象只是停留在使用F5快捷鍵上。但實(shí)際上，刷新包括三種。在開發(fā)者調(diào)試工具打開的情況下，長按刷新按鈕，會出現(xiàn)這三種刷新選項(xiàng)
【代碼反壓縮】
??一般地，線上的 javascript 代碼都是經(jīng)過壓縮的，基本上無法直接閱讀。點(diǎn)擊下方的大括號｛｝圖標(biāo)，瀏覽器會反壓縮過重新排版美化當(dāng)前的
javascript 代碼
【計(jì)算樣式】
??通過點(diǎn)擊 elements 標(biāo)簽右側(cè)的 computed 子標(biāo)簽，可以查看元素計(jì)算后的樣式
?
插件
下面將詳細(xì)介紹常用的一些 chrome 插件
【W(wǎng)eb 前端助手】
FEHelper(Web
前端助手)包含多個獨(dú)立小應(yīng)用，比如：Json工具、代碼美化、代碼壓縮、二維碼、Postman、markdown、網(wǎng)頁油猴、便簽筆記、信息加密與解密、隨機(jī)密碼生成、Crontab等，這樣安裝一個
FEHelper 相當(dāng)于安裝了多個插件
【字符編碼】
前端開發(fā)時，經(jīng)常出現(xiàn)亂碼的情況。但是，新版本的 chrome 瀏覽器已經(jīng)沒有更改字符編碼的設(shè)置選擇，這時就要用到set character Encoding
插件了
在頁面空白處，點(diǎn)擊右鍵，即可選擇需要的編碼格式
【OneTab】
經(jīng)常有開 10 個以上的標(biāo)簽頁經(jīng)歷，更痛苦的是，有太多的標(biāo)簽頁時，Chrome 有卡頓現(xiàn)象出現(xiàn)！使用OneTab插件，不僅節(jié)省高達(dá) 95%
的內(nèi)存，還能減輕標(biāo)簽頁混亂現(xiàn)象！單擊 OneTab 圖標(biāo)，所有標(biāo)簽頁轉(zhuǎn)換成一個列表。需要再次訪問標(biāo)簽頁時，可以單獨(dú)或全部恢復(fù)它們
【測量】
Page Ruler 可以直接查看網(wǎng)頁一些圖片的詳細(xì)像素大小、具體位置等，非常實(shí)用
?
快捷鍵
多記幾個快捷鍵，就可以少點(diǎn)幾次鼠標(biāo)，提升工作效率
【標(biāo)簽頁】
Command + W 關(guān)閉標(biāo)簽頁 Command + T 打開標(biāo)簽頁 Command + Shift + T 重新打開關(guān)閉的標(biāo)簽頁 Command +
左方向鍵 后退 Command + 右方向鍵 前進(jìn) Command + Option + 右方向鍵 跳轉(zhuǎn)到后一個標(biāo)簽頁 Command + Option +
左方向鍵 跳轉(zhuǎn)到前一個標(biāo)簽頁 Command + 1(到 8) 跳轉(zhuǎn)到特定標(biāo)簽頁 Command + 9 跳轉(zhuǎn)到最右側(cè)標(biāo)簽頁
【功能】
Command + Option + I 打開“開發(fā)者工具” Command + Shift + J 打開“下載內(nèi)容”頁 Command + Shift +
Delete 打開“清除瀏覽數(shù)據(jù)”選項(xiàng)
【網(wǎng)頁】
Command + R 刷新 Command + L 將光標(biāo)置于地址欄 Command + + 網(wǎng)頁放大 Command + - 網(wǎng)頁縮小 Command
+ 0 縮放 100% 空格鍵 向下滾動網(wǎng)頁，一次一個屏幕 Shift + 空格鍵 向上滾動網(wǎng)頁，一次一個屏幕
?
小功能
chrome 瀏覽器中隱藏了一些小功能
【文本編輯器】
在地址欄里，輸入data:text/html,<html contenteditable>，當(dāng)前的標(biāo)簽頁將變成一個文本編輯器，可以用來臨時記錄一些數(shù)據(jù)
【小恐龍游戲】
無法連接網(wǎng)絡(luò)，網(wǎng)頁出現(xiàn)小恐龍的時候，按空格，就可以玩游戲了
在地址欄里，輸入chrome://dino/，回車后，按空格，也可以出現(xiàn)小恐龍游戲
熱門工具 換一換