色噜噜影院,福利视频一区二区牛牛,天啪天天久久天天综合啪

chrome 瀏覽器的使用技巧

小樣樣樣樣樣樣 >《待分類(lèi)》

2020.02.22

關(guān)注

前端工程師大部分工作成果需要在瀏覽器中查看，使用 chrome 瀏覽器的頻率非常高。更好更優(yōu)雅地使用 chrome，將 chrome 配置成趁手的瀏覽器，將極大提升編程效率。本文將詳細(xì)介紹 chrome 瀏覽器的使用技巧

調(diào)試工具

下面介紹一些冷門(mén)但很有用的調(diào)試工具使用方法

【控制臺(tái)】

在 chrome 開(kāi)發(fā)者工具中的任何一個(gè)面板下(除 console 面板外)，按住 esc 都可以在該面板下方新生成一個(gè) console 面板

?通常情況下，控制臺(tái)只提供單行輸入，可以用分號(hào)做分割符來(lái)執(zhí)行多個(gè) javascript 語(yǔ)句；而如果需要多行代碼的話，可以通過(guò)組合鍵 shift+enter 來(lái)實(shí)現(xiàn)換行，在這種情況下代碼不會(huì)被立即執(zhí)行

【代碼片段】

chrome 在 sources 頁(yè)面提供 snippets 一欄，這里我們可以隨時(shí)編寫(xiě) Javascript 代碼，運(yùn)行結(jié)果會(huì)打印到控制臺(tái)。代碼是全局保存的，在任何頁(yè)面，包括新建標(biāo)簽頁(yè)，都可以查看或運(yùn)行這些代碼

【展開(kāi) DOM】

在 Elements 標(biāo)簽頁(yè)中，如果要查看一個(gè)元素中曾經(jīng)很深的子元素，可以按住 option 鍵，點(diǎn)擊元素，則元素的 DOM 結(jié)構(gòu)會(huì)完全展開(kāi)

【搜索】

??在 elements 標(biāo)簽下使用 ctrl+f 搜索功能，可以使用 css 選擇器，如'.test'，可以搜索到所有類(lèi)名為 test 的元素

【跳轉(zhuǎn)位置】

??在 elements 標(biāo)簽下，選擇元素節(jié)點(diǎn)，點(diǎn)擊右鍵菜單中的 scroll into view，可以滾動(dòng)瀏覽器到元素所處位置

【快速定位】

在 Sources 標(biāo)簽下的代碼文件中，使用 ctrl + p 呼出搜索框，然后以 :行號(hào):列號(hào) 的形式輸入并回車(chē)，可以將代碼快速定位到該位置

【刷新】

一般地，人們對(duì)于刷新的印象只是停留在使用F5快捷鍵上。但實(shí)際上，刷新包括三種。在開(kāi)發(fā)者調(diào)試工具打開(kāi)的情況下，長(zhǎng)按刷新按鈕，會(huì)出現(xiàn)這三種刷新選項(xiàng)

【代碼反壓縮】

??一般地，線上的 javascript 代碼都是經(jīng)過(guò)壓縮的，基本上無(wú)法直接閱讀。點(diǎn)擊下方的大括號(hào)｛｝圖標(biāo)，瀏覽器會(huì)反壓縮過(guò)重新排版美化當(dāng)前的 javascript 代碼

【計(jì)算樣式】

??通過(guò)點(diǎn)擊 elements 標(biāo)簽右側(cè)的 computed 子標(biāo)簽，可以查看元素計(jì)算后的樣式

插件

下面將詳細(xì)介紹常用的一些 chrome 插件

【W(wǎng)eb 前端助手】

FEHelper(Web 前端助手)包含多個(gè)獨(dú)立小應(yīng)用，比如：Json工具、代碼美化、代碼壓縮、二維碼、Postman、markdown、網(wǎng)頁(yè)油猴、便簽筆記、信息加密與解密、隨機(jī)密碼生成、Crontab等，這樣安裝一個(gè) FEHelper 相當(dāng)于安裝了多個(gè)插件

【字符編碼】

前端開(kāi)發(fā)時(shí)，經(jīng)常出現(xiàn)亂碼的情況。但是，新版本的 chrome 瀏覽器已經(jīng)沒(méi)有更改字符編碼的設(shè)置選擇，這時(shí)要用到 set character Encoding 插件

　　在頁(yè)面空白處，點(diǎn)擊右鍵，即可選擇需要的編碼格式

【OneTab】

　　經(jīng)常有開(kāi) 10 個(gè)以上的標(biāo)簽頁(yè)經(jīng)歷，更痛苦的是，有太多的標(biāo)簽頁(yè)時(shí)，Chrome 有卡頓現(xiàn)象出現(xiàn)！使用OneTab插件，不僅節(jié)省高達(dá) 95% 的內(nèi)存，還能減輕標(biāo)簽頁(yè)混亂現(xiàn)象！單擊 OneTab 圖標(biāo)，所有標(biāo)簽頁(yè)轉(zhuǎn)換成一個(gè)列表。需要再次訪問(wèn)標(biāo)簽頁(yè)時(shí)，可以單獨(dú)或全部恢復(fù)它們

【測(cè)量】

　　Page Ruler 可以直接查看網(wǎng)頁(yè)一些圖片的詳細(xì)像素大小、具體位置等，非常實(shí)用

快捷鍵

多記幾個(gè)快捷鍵，就可以少點(diǎn)幾次鼠標(biāo)，提升工作效率

【標(biāo)簽頁(yè)】

Command + W 關(guān)閉標(biāo)簽頁(yè)Command + T  打開(kāi)標(biāo)簽頁(yè)Command + Shift + T 重新打開(kāi)關(guān)閉的標(biāo)簽頁(yè)Command + 左方向鍵 后退Command + 右方向鍵 前進(jìn)Command + Option + 右方向鍵 跳轉(zhuǎn)到后一個(gè)標(biāo)簽頁(yè)Command + Option + 左方向鍵 跳轉(zhuǎn)到前一個(gè)標(biāo)簽頁(yè)Command + 1(到 8) 跳轉(zhuǎn)到特定標(biāo)簽頁(yè)Command + 9 跳轉(zhuǎn)到最右側(cè)標(biāo)簽頁(yè)

【功能】

Command + Option + I 打開(kāi)“開(kāi)發(fā)者工具”Command + Shift + J 打開(kāi)“下載內(nèi)容”頁(yè)Command + Shift + Delete 打開(kāi)“清除瀏覽數(shù)據(jù)”選項(xiàng)Command + Shift + C 打開(kāi)“檢查元素”選項(xiàng)

【網(wǎng)頁(yè)】

Command + R 刷新Command + L 將光標(biāo)置于地址欄Command + + 網(wǎng)頁(yè)放大Command + - 網(wǎng)頁(yè)縮小Command + 0 縮放 100%空格鍵 向下滾動(dòng)網(wǎng)頁(yè)，一次一個(gè)屏幕Shift + 空格鍵 向上滾動(dòng)網(wǎng)頁(yè)，一次一個(gè)屏幕