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


前言

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

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

如何開啟開發者工具

其實有三種方法可以打開

第一種 : 鍵盤按下 F12

第二種 : 鍵盤 ctrl + shift + i

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

打開之後要幹嘛?我就問

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

視窗調整

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

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

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

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

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

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

各種設定

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

  • 語言 & 主題色彩

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

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

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

結論

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

#Chrome #開發者工具






你可能感興趣的文章

【隨堂筆記】Python 桌面應用程式

【隨堂筆記】Python 桌面應用程式

使用 JavaScript 處理二進位資料

使用 JavaScript 處理二進位資料

V-for 的使用

V-for 的使用






留言討論