前言
不知道大家有沒有這樣經驗，小妹小時候不小心按到鍵盤某個鍵就會出現下圖右邊黑色的視窗，然後就覺得:矮額好可怕這是什麼，電腦是不是中毒了，趕快關掉，假的眼睛業障重阿。
到了踏入程式領域才知道這個東西原來叫開發者工具，根本就是工程師的好朋友。原來我以前都錯怪他了xD今天就來簡單介紹一下開發者工具吧
如何開啟開發者工具
其實有三種方法可以打開
第一種 : 鍵盤按下 F12
第二種 : 鍵盤 ctrl + shift + i
第三種 : 滑鼠右鍵 ⇒ 檢查， 如下圖
打開之後要幹嘛?我就問
打開之後多數人的畫面應該會長得像這樣，看到右邊會有黑色視窗跑出來。有些人的可能會在左邊、下面或是另外跳出一個獨立的視窗，這些都是有可能的!就讓我們繼續看下去!
視窗調整
看到右上角垂直三個點點的按鍵，看到Dock side(中文:固定側)有4個選項可以選，這個就是用來調整開發者工具的視窗位置。
第一個選項是跳出獨立視窗，按下去會如下圖
第二個選項是顯示在整個視窗的左邊，如下圖
第三個選項是顯示在整個視窗的右邊，也是我最常用的模式。如下圖
第四個選項是顯示在視窗的下面，我前輩和同事都比較常用這個模式。如下圖
其實這四個沒有哪個比較好或比較壞，青菜蘿蔔各有喜好，就選個自己喜歡的模式去使用吧!
各種設定
接下來看到右上角的齒輪~如果有什麼設定都可以去這邊看。像是語言、主題色彩、設備、快捷鍵之類的
語言 & 主題色彩
- 這兩個都會在Preferences裡面，主題部分可以選擇「系統預設」、「Light」、「Dark」但因為我的設定本身就是深色模式，所以這邊系統預設就會直接帶入深色模式啦~
- 下面有語言部份，可以選擇自己看的習慣的語言，也可以自己去亂調(記得從哪裡調回來就好xD)
快捷鍵
- 這邊有落落長的快捷鍵教學就給大家自己去看啦
- 這邊有落落長的快捷鍵教學就給大家自己去看啦
裝置
- 對有些人來說這個可能沒什麼用，但對於需要做畫面大小調整的人來說就很有用啦~這裡可以選擇要切換到哪種裝置的視窗大小。不同的裝置，螢幕大小都會有不同，所以在做網頁設計的時候需要根據不同裝置去做到調整，這個稱為響應式網頁(RWD)。如果沒有根據裝置的視窗大小去做調整，就會發生爆版的情形，這時候就會有橫向滾軸出現啦QQ在使用上就會有點不友善。有興趣的可以再自己去搜尋xD
- 目前預設有iPhone、iPad、Samsung Galaxy…等，也可以根據自己的需求去做設定
結論
人與人之間透過文字、說話來溝通；電腦不會說話，所以人和電腦就可以透過開發者工具來溝通啦~開發者工具提供很多資訊讓我們知道這個網頁的一些背後運作原理，好好研究我們也可以順利地跟電腦溝通~開發者工具教學就到這邊，下回準備介紹開發者工具-Element!大家掰掰~
