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