好用的chrome開發者工具— 不是工程師的你也該來認識一下 ...

只要在瀏覽器的畫面中，按下鍵盤上的功能鍵F12、或是按下快捷鍵CTRL + SHIFT + I，就能開啟這個工具了。

一般會出現在下面或是右邊。

像我的開發者工具是設置在畫面右邊， ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite好用的chrome開發者工具—不是工程師的你也該來認識一下Googlechrome這個瀏覽器，相信很多人幾乎每天都在用。

隨著網路越來越普及，很多webapp的誕生也增加了我們對於瀏覽器的依賴(例如Gmail、GoogleDrive、GoogleKeep等等)上Medium看看文章、上Facebook滑朋友動態、或是看Youtube影片，幾乎都是透過瀏覽器完成的。

不過我們每天在使用的瀏覽器，你知道他背後有個很強的功能嗎？沒錯，就是今天要介紹的開發者工具(chromedevtools)這個功能相信不是工程師的朋友，有的人可能還是第一次聽說，不過即便你不會寫code，這個功能也能給你帶來很多便利。

只要在瀏覽器的畫面中，按下鍵盤上的功能鍵F12、或是按下快捷鍵CTRL+SHIFT+I，就能開啟這個工具了。

一般會出現在下面或是右邊。

像我的開發者工具是設置在畫面右邊，可以依個人喜好調整位置如果我們想觀察這個網頁結構，可以切換到Elements這個分頁裡面。

這裡會將這個網頁的整個結構秀出來，也就是這個頁面的原始html程式碼。

看似簡單的Google頁面，背後卻有複雜的html程式碼結構一個網頁的組成，會有html、css、與js三個部分組成。

我們可以透過觀察這些html標籤，去了解這個網頁是怎麼組成的。

以上面這個頁面為例：網頁當中有許多圖片檔，我們可以透過對著圖片點右鍵>檢查，去觀察這個圖片在網頁當中是怎麼表現出來的，這裡可以看到是用一個標籤去做顯示。

相信很多人常常會碰到一些會鎖右鍵的網站，可是網站中的圖片真的好想保存下來的時候該怎麼辦呢？一般的網站，大部分都會使用img標籤去顯示圖片，只要我們找到它的src屬性，就可以很輕鬆地找到那張圖片啦！有些網站會鎖右鍵，這時只要找到該圖片的img標籤，在對著它點右鍵另開新分頁就好啦有些網站不見得會將圖片塞在img標籤，這時候我們可以透過network這個標籤，從眾多伺服器回給我們的回應裡，去找到這張圖片。

瀏覽器要顯示圖片的時候，必定會對伺服器發送相關的請求，接著瀏覽器會在這眾多回應中找到圖片並渲染到畫面上。

因此我們只要找到這個伺服器的回應，就找到圖片了。

利用Network標籤去找到對應的回應，也就是我們要的圖片查看網頁結構，除了用Elements頁籤之外，也可以透過Sources查看這個網站的原始檔(也就是html、css、js檔)。

不過Sources裡面有個非常方便的功能，叫做Snippets，可以讓使用者執行自訂義的js當你發現自己上某個網站常常重複做某些動作時，這時Snippets就很好用。

稍微會一些簡單的js，你可以自己血衣些自動化的腳本，例如自動登入之類的，不用在自己手敲啦！利用Snippets重複執行同一個動作Snippets頁籤自訂js腳本如果你本身就是個工程師，那這個功能應該會很方便：測試的時候不用在一個一個點了！你也有一些開發者工具的小撇步嗎？歡迎留言分享！--1MorefromKevinTungFollowAdeveloperwhoispassionateaboutprogramming,learningtocode,andsharingthatknowledgeLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedKevinTung54FollowersAdeveloperwhoispassionateaboutprogramming,learningtocode,andsharingthatknowledgeFollowMorefromMediumQtEatthatFrogwithaPomodoroFrankTranUpdateScratchonScratchWeekADITYADIXITWhatareREFsinReactJSandWhereToUseThemDeanGladishSyntaxandDataStructuresofES6:LogicalOperators,Array.prototype.reduce,HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable