Google Chrome 開發人員工具

[yulinyeh]

Google Chrome 開發人員工具

隨著 Google Chrome 版本的更新，現在開發也越來越依賴開發者工具。
因為不管是微調樣式，或是偵錯 JavaScript 都很方便，真的是咻一下就把問題解決了。

接下來就介紹我常用的功能。
筆者目前 Chrome 版本為 39.0.2171.99 (64-bit); 作業系統: OS X 10.10.1

Device Mode

剛開始吹起 RWD 風的時候，有許多外掛、網站可以藉由調整瀏覽器大小，或是嵌入多個 iframe 以模擬各個行動裝置的螢幕大小，但是現在已經可以藉由 Chrome 內建的功能達到囉。

Step 0: 開啟 Device Mode

1. • 如果是使用 Mac 可以使用組合鍵command + option + i開啟面板
   • 也可以點選『漢堡選單 / 更多工具 / 開發人員工具』
2. 接著會看到以下面的畫面
   
3. 點擊選單左方的手持裝置圖示，來開啟 device mode 。
4. 如果成功的話，手持裝置的圖示將會被高亮
   也會看到整個網站被暗色系的面板包圍
   
   （可參考此圖內的數字圖示，對應以下要介紹的功能）

   Step 1: 選擇裝置尺寸

5. 點擊 Device 旁的下拉選單
6. 就可以看到許多可以參考的裝置尺寸
   
   （筆者目前私心大多以 A 品牌的尺寸為參考依據）
7. 選擇玩尺寸之後，可以看見尺寸及 UA 的欄位也幫開發者一併填上了
   
   真的是揪甘心der
8. 然後最重要的是，調整完裝置的設定之後，一定要重新 refresh ，這樣網站的樣式才會套用新的設定
   

   Step 2: 選擇網路速度

9. 點擊 Network 旁的下拉選單
10. 就可以模擬網站在這種速度下 loading 的狀況
    
    但實際的網路情況並不會如此的穩定連接，可能時好時壞，所以真的僅供參考

    Step3: 縮放至適當大小

有時候在模擬裝置螢幕大小的時候，難免因為已經開啟了開發人員工具，又或是因為 PC / 筆電的螢幕不夠大，無法瀏覽整個網站的情況，這時候就可以使用這個功能。

1. 勾選 Fit
2. 比較圖
   

   Step4: 重置覆寫的設定

3. 如果要關閉因開啟 Device Mode 所異動的設定，可以直接點擊禁止符號，就可以重置設定 (Device, Network, Screen Size, Pixel Ratio, UA)
4. 重置之後，同樣也需要 refresh

   Step5: 檢索 Media Queries

   • 這個功能挺有趣的，他可以將網站所使用 Media Queries 涵蓋的螢幕尺寸列出，可用這個方式去觀察其它網站是怎麼規劃各個螢幕尺寸的設計。
     1. 點選像似階梯的符號
     2. 接著會看到多個不同顏色的條狀圖拼接著
        
     3. 如果將滑鼠暫作停留，可以看出 media query 的設定值
        
     4. 如果直接點擊條狀圖，整個顯示區域的寬度就會被調整為 media query 的設定的值
        
   • 若是在開發時，有時候還不確定 media query 設定的界限，可利用以下方式去觀察網頁是否有破版，或是待調整的地方。
     1. 勾選修改畫面尺寸的 CheckBox ，接著直接修改數值
        
     2. 拖曳右側或下方的 Bar ，直接修改寬高
        

        結語

相信學會了這幾招，在開發 RWD 的時候，應該就更能得心應手了。有機會再介紹其它 Chrome 好用的功能

影像擷取出處來源：www.dadaabstories.org, Google Chrome

[DerekHung]

非常感謝您的投稿！在近日內會公布此次徵稿活動的結果，敬請期待:D