chrome 瀏覽器的使用技巧

時間 2019-12-19

原文原文鏈接

前端工程師大部分工做成果須要在瀏覽器中查看，使用 chrome 瀏覽器的頻率很是高。更好更優雅地使用 chrome，將 chrome 配置成趁手的瀏覽器，將極大提高編程效率。本文將詳細介紹 chrome 瀏覽器的使用技巧javascript

調試工具

下面介紹一些冷門但頗有用的調試工具使用方法css

【控制檯】html

在 chrome 開發者工具中的任何一個面板下(除 console 面板外)，按住 esc 均可以在該面板下方新生成一個 console 面板前端

一般狀況下，控制檯只提供單行輸入，能夠用分號作分割符來執行多個 javascript 語句；而若是須要多行代碼的話，能夠經過組合鍵 shift+enter 來實現換行，在這種狀況下代碼不會被當即執行java

【代碼片斷】chrome

chrome 在 sources 頁面提供 snippets 一欄，這裏咱們能夠隨時編寫 Javascript 代碼，運行結果會打印到控制檯。代碼是全局保存的，在任何頁面，包括新建標籤頁，均可以查看或運行這些代碼編程

【展開 DOM】瀏覽器

在 Elements 標籤頁中，若是要查看一個元素中曾經很深的子元素，能夠按住 option 鍵，點擊元素，則元素的 DOM 結構會徹底展開markdown

【搜索】網絡

在 elements 標籤下使用 ctrl+f 搜索功能，能夠使用 css 選擇器，如'.test'，能夠搜索到全部類名爲 test 的元素

【跳轉位置】

在 elements 標籤下，選擇元素節點，點擊右鍵菜單中的 scroll into view，能夠滾動瀏覽器到元素所處位置

【快速定位】

在 Sources 標籤下的代碼文件中，使用 ctrl + p 呼出搜索框，而後以 :行號:列號 的形式輸入並回車，能夠將代碼快速定位到該位置

【刷新】

通常地，人們對於刷新的印象只是停留在使用F5快捷鍵上。但實際上，刷新包括三種。在開發者調試工具打開的狀況下，長按刷新按鈕，會出現這三種刷新選項

【代碼反壓縮】

通常地，線上的 javascript 代碼都是通過壓縮的，基本上沒法直接閱讀。點擊下方的大括號｛｝圖標，瀏覽器會反壓縮太重新排版美化當前的 javascript 代碼

【計算樣式】

經過點擊 elements 標籤右側的 computed 子標籤，能夠查看元素計算後的樣式

插件

下面將詳細介紹經常使用的一些 chrome 插件

【Web 前端助手】

FEHelper(Web 前端助手)包含多個獨立小應用，好比：Json工具、代碼美化、代碼壓縮、二維碼、Postman、markdown、網頁油猴、便籤筆記、信息加密與解密、隨機密碼生成、Crontab等，這樣安裝一個 FEHelper 至關於安裝了多個插件

【字符編碼】

前端開發時，常常出現亂碼的狀況。可是，新版本的 chrome 瀏覽器已經沒有更改字符編碼的設置選擇，這時就要用到set character Encoding插件了

　　在頁面空白處，點擊右鍵，便可選擇須要的編碼格式

【OneTab】

　　常常有開 10 個以上的標籤頁經歷，更痛苦的是，有太多的標籤頁時，Chrome 有卡頓現象出現！使用OneTab插件，不只節省高達 95% 的內存，還能減輕標籤頁混亂現象！單擊 OneTab 圖標，全部標籤頁轉換成一個列表。須要再次訪問標籤頁時，能夠單獨或所有恢復它們

【測量】

　　Page Ruler 能夠直接查看網頁一些圖片的詳細像素大小、具體位置等，很是實用

快捷鍵

多記幾個快捷鍵，就能夠少點幾回鼠標，提高工做效率

【標籤頁】

Command + W 關閉標籤頁
Command + T  打開標籤頁
Command + Shift + T 從新打開關閉的標籤頁
Command + 左方向鍵 後退
Command + 右方向鍵 前進
Command + Option + 右方向鍵 跳轉到後一個標籤頁
Command + Option + 左方向鍵 跳轉到前一個標籤頁
Command + 1(到 8) 跳轉到特定標籤頁
Command + 9 跳轉到最右側標籤頁

【功能】

Command + Option + I 打開「開發者工具」
Command + Shift + J 打開「下載內容」頁
Command + Shift + Delete 打開「清除瀏覽數據」選項

【網頁】

Command + R 刷新
Command + L 將光標置於地址欄
Command + + 網頁放大
Command + - 網頁縮小
Command + 0 縮放 100%
空格鍵 向下滾動網頁，一次一個屏幕
Shift + 空格鍵 向上滾動網頁，一次一個屏幕

小功能

chrome 瀏覽器中隱藏了一些小功能

【文本編輯器】

在地址欄裏，輸入data:text/html,<html contenteditable>，當前的標籤頁將變成一個文本編輯器，能夠用來臨時記錄一些數據

【小恐龍遊戲】

沒法鏈接網絡，網頁出現小恐龍的時候，按空格，就能夠玩遊戲了

在地址欄裏，輸入chrome://dino/，回車後，按空格，也能夠出現小恐龍遊戲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。