15 個必須知道的 chrome 開發工具技巧
在Web開發者中,Google Chrome是使用最廣泛的瀏覽器。六週一次的釋出週期和一套強大的不斷擴大開發功能,使其成為了web開發者必備的工具。你可能已經熟悉了它的部分功能,如使用console和debugger線上編輯CSS。在這篇文章中,我們將分享15個有助於改進你的開發流程的技巧。
一、快速切換檔案
如果你使用過sublime text,那麼你可能不習慣沒有Go to anything這個功能的覆蓋。你會很高興聽到chrome開發者功能也有這個功能,當DevTools被開啟的時候,按Ctrl+P(在 mac 是cmd+p),就能快速搜尋和開啟你專案的檔案。
二、在原始碼中搜尋
如果你希望在原始碼中搜尋要怎麼辦呢?在頁面已經載入的檔案中搜尋一個特定的字串,快捷鍵是Ctrl + Shift + F (Cmd + Opt + F),這種搜尋方式還支援正規表示式哦。
三、快速跳轉到指定行
在Sources標籤中開啟一個檔案之後,在Windows和Linux中,按Ctrl + G,(Cmd + L),然後輸入行號,DevTools就會允許你跳轉到檔案中的任意一行。
另外一種方式是按Ctrl + O,輸入:和行數,而不用去尋找一個檔案。
四、在控制檯選擇元素
DevTools控制檯支援一些變數和函式來選擇DOM元素:
- $()–document.querySelector()的簡寫,返回第一個和css選擇器匹配的元素。例如$(‘div’)返回這個頁面中第一個div元素
- $$()–document.querySelectorAll()的簡寫,返回一個和css選擇器匹配的元素陣列。
- $0-$4–依次返回五個最近你在元素皮膚選擇過的DOM元素的歷史記錄,$0是最新的記錄,以此類推。
想要了解更多控制檯命令,戳這裡:Command Line API。
五、使用多個插入符進行選擇
當編輯一個檔案的時候,你可以按住Ctrl(cmd),在你要編輯的地方點選滑鼠,可以設定多個插入符,這樣可以一次在多個地方編輯。
六、儲存記錄
勾選在Console標籤下的儲存記錄選項,你可以使DevTools的console繼續儲存記錄而不會在每個頁面載入之後清除記錄。當你想要研究在頁面還沒載入完之前出現的bug時,這會是一個很方便的方法。
七、優質列印
Chrome’s Developer Tools有內建的美化程式碼,可以返回一段最小化且格式易讀的程式碼。Pretty Print的按鈕在Sources標籤的左下角。
八、裝置模式
對於開發移動友好頁面,DevTools包含了一個非常強大的模式,這個谷歌視訊介紹了其主要特點,如調整螢幕大小、觸控模擬和模擬糟糕的網路連線。
九、裝置感測模擬
裝置模式的另一個很酷的功能是模擬移動裝置的感測器,例如觸控螢幕和加速計。你甚至可以惡搞你的地理位置。這個功能位於元素標籤的底部,點選“show drawer”按鈕,就可看見 Emulation標籤 –> Sensors.
十、顏色選擇器
當在樣式編輯中選擇了一個顏色屬性時,你可以點選顏色預覽,就會彈出一個顏色選擇器。當選擇器開啟時,如果你停留在頁面,滑鼠指標會變成一個放大鏡,讓你去選擇畫素精度的顏色。
十一、強制改變元素狀態
DevTools有一個可以模擬CSS狀態的功能,例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能
十二、視覺化的DOM陰影
Web瀏覽器在構建如文字框、按鈕和輸入框一類元素時,其它基本元素的檢視是隱藏的。不過,你可以在Settings -> General 中切換成Show user agent shadow DOM,這樣就會在元素標籤頁中顯示被隱藏的程式碼。甚至還能單獨設計他們的樣式,這給你了很大的控制權。
十三、選擇下一個匹配項
當在Sources標籤下編輯檔案時,按下Ctrl + D (Cmd + D) ,當前選中的單詞的下一個匹配也會被選中,有利於你同時對它們進行編輯。
十四、改變顏色格式
在顏色預覽功能使用快捷鍵Shift + 點選,可以在rgba、hsl和hexadecimal來回切換顏色的格式
十五、通過workspaces來編輯本地檔案
Workspaces是Chrome DevTools的一個強大功能,這使DevTools變成了一個真正的IDE。Workspaces會將Sources選項卡中的檔案和本地專案中的檔案進行匹配,所以你可以直接編輯和儲存,而不必複製/貼上外部改變的檔案到編輯器。
為了配置Workspaces,只需開啟Sources選項,然後右擊左邊皮膚的任何一個地方,選擇 Add Folder To Worskpace,或者只是把你的整個工程資料夾拖放入Developer Tool。現在,無論在哪一個資料夾,被選中的資料夾,包括其子目錄和所有檔案都可以被編輯。為了讓Workspaces更高效,你可以將頁面中用到的檔案對映到相應的資料夾,允許線上編輯和簡單的儲存。
瞭解更多關於Workspaces的使用,戳這裡:Workspaces。
相關文章
- Vue開發必須知道的36個技巧Vue
- 配音技巧 | 學配音必須要知道的幾個技巧
- LLM部署,你必須要知道的幾個技巧!
- 寫chrome外掛前必須要知道的Chrome
- 前端必須知道的除錯工具前端除錯
- 11個SEO人員必須知道的Chrome擴充套件外掛Chrome套件
- 前端設計師必須知道的10個重要的CSS技巧前端CSS
- 新手入門:入手MacBook 後必須知道的 幾 個小技巧?Mac
- 您必須知道的 Git 分支開發規範Git
- Chrome瀏覽器必須開啟的五個設定Chrome瀏覽器
- Gradle:你必須掌握的開發常見技巧Gradle
- 前端開發者務必知道的JavaScript技巧前端JavaScript
- 3款你必須知道的爬蟲工具爬蟲
- 寶鯤財經:投資必須知道的15法則
- 想入門web前端開發,並且學好,你必須知道的十大開發工具!Web前端
- Python常用的開源框架,這三個你必須知道!Python框架
- chrome開發者工具各種騷技巧Chrome
- 開發者測試:你必須知道 7 件事
- Vue3.0之前你必須知道的TypeScript實戰技巧VueTypeScript
- 釋出新聞稿必須知道的七大SEO技巧
- Java開發者必須掌握的15個框架(20k是小問題)Java框架
- 你必須知道的 SmartSql !SQL
- 【推薦】Python中你必須要知道的IDE工具!PythonIDE
- 敏捷開發+PMP考試:2024年你必須掌握的10個關鍵技巧!敏捷
- 這幾個python常用的庫你必須知道!Python
- AppStore 中5個必須知道的基本設定APP
- 高併發下秒殺商品,必須知道的9個細節
- 15款好用超讚的chrome外掛, 開發者們的必備~Chrome
- 7款滲透測試工具,你必須知道!
- 【分享】每個 Web 開發者在 2021 年必須擁有 15 個 VSCode 擴充套件WebVSCode套件
- 2021年Web開發必須知道的7大優秀趨勢Web
- Python 這10個字典操作你必須知道Python
- Python入門必須知道的11個知識點Python
- JS高階之面試必須知道的幾個點JS面試
- 初學Python必須知道的11個知識點!Python
- 邊緣計算你必須知道的100個術語
- 工作效率太低?這個目標管理神器工具你必須要知道
- 優秀程式設計師必須知道的32個演算法,提高你的開發效率程式設計師演算法
- 新媒體人必備:你必須知道的5款追熱點工具