一、快速查詢檔案
如果你使用過sublime,那麼你會知道』go to anything』的強大。沒錯,chrome現在也有了這一功能。
操作如下:
1、f12開啟你的chrome偵錯程式;
2、按下ctrl+p(mac上cmd + p);
3、搜尋你想開啟的檔名即可。
二、在源**中搜尋
但是,如果我們想在整個工程下,查詢一段源**呢?
操作如下:
1、f12開啟你的chrome偵錯程式;
2、按下ctrl+shift+f(mac上cmd+opt+f);
3、在輸入框中輸入你想查詢的源**,回車,就ok啦。
注:該搜尋也支援正規表示式。
三、跳到指定行
當你在chrome偵錯程式的sources欄,已經開啟了檔案,chrome也允許你跳到指定的行數,在windows和linux系統下,只需按下ctrl+g(mac上cmd+l),然後輸入你指定的行數即可。
另一種,方法就是ctrl+o,輸入」:」+行數即可。
四、在控制台(console)中獲取dom元素
chrome控制台,提供了方法和變數來快速獲取頁面中的dom元素,如下:
1、$()—就是document.queryselector()原生方法的對映。功能嘛,就是獲取並返回第乙個與填寫的css屬性匹配的dom元素,如$(『div』)就會返回第乙個出現在頁面中的div元素。
2、$$()—就是document.queryselectorall()原生方法的對映。功能嘛,就是獲取並返回乙個陣列,陣列中包含了所有與你填寫的css屬性匹配的dom元素。
3、$0--$4—代表你在chrome偵錯程式中操作不同dom元素的歷史記錄,且最多記錄5次,故而只有$0-$4這五個變數。$0代表最近一次,依次類推。
五、多游標
另乙個牛逼的功能就是多游標。
當你想在呈現的檔案中多處操作**時,你可以通過按住ctrl(mac上cmd),然後滑鼠點選,你想要出現的游標處即可。
六、儲存日誌
在console面板上勾選『儲存日誌』選項,則不會在你每次載入頁面時,清空日誌。當你想要調查頁面關閉前的bugs時,可要記住這一選項哦。
七、格式化**
chrome通過其內建的優化器,幫助你提高檔案內容的可讀性。對於壓縮過或者雜亂的**,尤為適用。
怎麼實現呢?
操作如下:
1、f12開啟chrome開發工具;
2、選擇你想要閱讀的檔案;
3、點選檔案下方的」」狀按鈕即可。
九、裝置模擬器
另乙個十分酷炫的功能就是,模擬移動裝置端。
例如我們可以通過chrome模擬人為觸控螢幕和晃動裝置。你甚至可以通過它改變你的地理位置哦。
操作如下:
1、f12開啟chrome偵錯程式;
2、在偵錯程式底部選中emulation選項;
3、最後在emulation面板中,左側選中sensors即可。
十、顏色選擇器
當你呼叫了chrome的顏色選擇器後,你可以通過你的滑鼠,懸浮在網頁中的任意處,獲取顏色,它會十分精準地將其轉換成對應的編碼格式。
是不是很炫酷?
操作如下:
1、f12開啟chrome偵錯程式;
2、選中目標元素;
3、在樣式編輯器中,點選顏色預覽,就會出現這個顏色選擇器。
十
一、強制改變元素狀態
chrome開發工具有乙個強制改變元素css狀態的功能,如:hover和:focus。對於csser比較方便。
十
二、視覺化「隱藏的dom」
web瀏覽器在構建例如textbox,button以及input這些元素時,通常會隱藏在其之下的展現層元素。
但是,我們可以通過setting à general,在general面板中選中』show user agent shadow dom』這一選項,來展示這些被隱藏掉的基礎元素。
你甚至可以單獨地去設定它們的樣式。
十
三、選中下乙個匹配項
十四、 改變顏色格式
在顏色預覽中,通過shift + 滑鼠點選,就可以在rgba,hsl和hexadecimal三種格式中,來回切換。
十
五、利用chrome的工作空間,編輯本地檔案
chrome的工作空間,也是非常強大的,它可以直接編輯和儲存你的本地檔案,無需額外的操作,例如複製、貼上。怎麼配置它呢?
操作如下:
1、 f12開啟chrome偵錯程式
2、 找到sources欄,出現在左側的控制面板,點選滑鼠右鍵,選擇add folder to workspace。或者,直接將你整個工程資料夾,拖拽到偵錯程式中。
原文:15 must-know chrome devtools tips and tricks
15個開發者必須知道的chrome技巧
在web開發者中,google chrome是使www.cppcns.com用最廣泛的瀏覽器。六周一次的發布週期和一套強大的不斷擴大開發功能,使其成為了web開發者必備的工具。你可能已經熟悉了它的部分功能,如使用console和debugger 編輯css。在這篇文章中,我們將分享15個有助於改進你...
15個對開發人員最佳的Chrome擴充套件外掛程式
使用chrome的擴充套件外掛程式使得我們的日常工作不再那麼的乏味。雖然chrome給我們提供了很多內建的擴充套件,似乎我們不再需要其他更多的工具了,但我們還是想向你介紹15個對web開發人員最佳的chrome擴充套件外掛程式。1.web developer 為chrome的web開發者擴充套件增加...
chrome外掛程式的開發
一,chrome瀏覽器外掛程式開發 自動登入 二,chrome瀏覽器外掛程式開發 關於案例 以下文章也很不錯 一,chrome 擴充套件開發教程 1 hello chrome 二,chrome 擴充套件開發教程 2 background的用法 三,chrome 擴充套件開發教程 3 content ...