在web開發者中，google chrome是使www.cppcns.com用最廣泛的瀏覽器。六周一次的發布週期和一套強大的不斷擴大開發功能，使其成為了web開發者必備的工具。你可能已經熟悉了它的部分功能，如使用console和debugger**編輯css。在這篇文章中，我們將分享15個有助於改進你的開發流程的技巧。
一、快速切換檔案
如果你使用過sublime text，那麼你可能不習慣沒有go to anything這個功能的覆蓋。你會很高興聽到chrome開發者功能也有這個功能，當devtools被開啟的時候，按ctrl+p（cmd+pon 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 www.cppcns.comuser 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更高效，你可以將頁面中用到的檔案對映到相應的資料夾，允許**編輯和簡單的儲存。
本文標題: 15個開發者必須知道的chrome技巧
本文位址: /wangluo/xiangguanjiqiao/203437.html
移動開發者必須知道的Android框架推薦
一些總結出來的android快速開發框架，全部都是開源框架，附帶專案位址，是開發學習的絕佳資料。開發者qq群 230206891 優點 功能看起來比較完善。缺點 這個是個人寫的，從2013年就停止維護了，沒有專案文件。開發者qq群 257053751 優點 功能比較全面，效率很高，文件完善，有專案d...
每個Android開發者必須知道的資源集錦
英文原文 resources every android developer must know 隨著 android 平台持續驚人的增長，越來越多的開發人員開始工作於 android 應用程式。而且現在的 android 平台已經非常成熟了。這篇文章比較適合於初學者和有一定經驗的 android ...
個人開發者必須知道的一些事
本文首先發表在 剛做完tt日程管理的3.0大版本，一路走來，感覺有些東西應該寫下來，為了自己以後能夠有個回顧，也為了給新手朋友一些鼓勵和經驗。一開始做這個應用也沒有多想，只是有天覺得自己需要記些事情，可以到時提醒，可以雲同步，僅此而已。然後，1.0版本就誕生了。多的圖就不上了，不忍直視。那時候沒有流...