Google Chrome開發者工具教學 - 前言

前言

不知道大家有沒有這樣經驗，小妹小時候不小心按到鍵盤某個鍵就會出現下圖右邊黑色的視窗，然後就覺得:矮額好可怕這是什麼，電腦是不是中毒了，趕快關掉，假的眼睛業障重阿。

到了踏入程式領域才知道這個東西原來叫開發者工具，根本就是工程師的好朋友。原來我以前都錯怪他了xD今天就來簡單介紹一下開發者工具吧

如何開啟開發者工具

其實有三種方法可以打開

第一種 : 鍵盤按下 F12

第二種 : 鍵盤 ctrl + shift + i

第三種 : 滑鼠右鍵 ⇒ 檢查， 如下圖

打開之後要幹嘛?我就問

打開之後多數人的畫面應該會長得像這樣，看到右邊會有黑色視窗跑出來。有些人的可能會在左邊、下面或是另外跳出一個獨立的視窗，這些都是有可能的!就讓我們繼續看下去!

視窗調整

看到右上角垂直三個點點的按鍵，看到Dock side(中文:固定側)有4個選項可以選，這個就是用來調整開發者工具的視窗位置。

第一個選項是跳出獨立視窗，按下去會如下圖

第二個選項是顯示在整個視窗的左邊，如下圖

第三個選項是顯示在整個視窗的右邊，也是我最常用的模式。如下圖

第四個選項是顯示在視窗的下面，我前輩和同事都比較常用這個模式。如下圖

其實這四個沒有哪個比較好或比較壞，青菜蘿蔔各有喜好，就選個自己喜歡的模式去使用吧!

各種設定

接下來看到右上角的齒輪~如果有什麼設定都可以去這邊看。像是語言、主題色彩、設備、快捷鍵之類的

• 語言 & 主題色彩

  • 這兩個都會在Preferences裡面，主題部分可以選擇「系統預設」、「Light」、「Dark」但因為我的設定本身就是深色模式，所以這邊系統預設就會直接帶入深色模式啦~
  • 下面有語言部份，可以選擇自己看的習慣的語言，也可以自己去亂調(記得從哪裡調回來就好xD)
    

• 快捷鍵

  • 這邊有落落長的快捷鍵教學就給大家自己去看啦
    

• 裝置

  • 對有些人來說這個可能沒什麼用，但對於需要做畫面大小調整的人來說就很有用啦~這裡可以選擇要切換到哪種裝置的視窗大小。不同的裝置，螢幕大小都會有不同，所以在做網頁設計的時候需要根據不同裝置去做到調整，這個稱為響應式網頁(RWD)。如果沒有根據裝置的視窗大小去做調整，就會發生爆版的情形，這時候就會有橫向滾軸出現啦QQ在使用上就會有點不友善。有興趣的可以再自己去搜尋xD
  • 目前預設有iPhone、iPad、Samsung Galaxy…等，也可以根據自己的需求去做設定
    

結論

人與人之間透過文字、說話來溝通；電腦不會說話，所以人和電腦就可以透過開發者工具來溝通啦~開發者工具提供很多資訊讓我們知道這個網頁的一些背後運作原理，好好研究我們也可以順利地跟電腦溝通~開發者工具教學就到這邊，下回準備介紹開發者工具-Element!大家掰掰~