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

Google chrome這個瀏覽器，相信很多人幾乎每天都在用。隨著網路越來越普及，很多webapp的誕生也增加了我們對於瀏覽器的依賴(例如Gmail、Google Drive、Google Keep等等)

上Medium看看文章、上Facebook滑朋友動態、或是看Youtube影片，幾乎都是透過瀏覽器完成的。不過我們每天在使用的瀏覽器，你知道他背後有個很強的功能嗎？沒錯，就是今天要介紹的開發者工具(chrome dev tools)

這個功能相信不是工程師的朋友，有的人可能還是第一次聽說，不過即便你不會寫code，這個功能也能給你帶來很多便利。

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

像我的開發者工具是設置在畫面右邊，可以依個人喜好調整位置

如果我們想觀察這個網頁結構，可以切換到 Elements 這個分頁裡面。這裡會將這個網頁的整個結構秀出來，也就是這個頁面的原始html程式碼。

看似簡單的Google頁面，背後卻有複雜的html程式碼結構

一個網頁的組成，會有html、css、與js三個部分組成。我們可以透過觀察這些html標籤，去了解這個網頁是怎麼組成的。

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

相信很多人常常會碰到一些會鎖右鍵的網站，可是網站中的圖片真的好想保存下來的時候該怎麼辦呢？

一般的網站，大部分都會使用 img 標籤去顯示圖片，只要我們找到它的 src 屬性，就可以很輕鬆地找到那張圖片啦！

有些網站會鎖右鍵，這時只要找到該圖片的img標籤，在對著它點右鍵另開新分頁就好啦

有些網站不見得會將圖片塞在 img 標籤，這時候我們可以透過 network 這個標籤，從眾多伺服器回給我們的回應裡，去找到這張圖片。瀏覽器要顯示圖片的時候，必定會對伺服器發送相關的請求，接著瀏覽器會在這眾多回應中找到圖片並渲染到畫面上。因此我們只要找到這個伺服器的回應，就找到圖片了。

利用Network標籤去找到對應的回應，也就是我們要的圖片

查看網頁結構，除了用 Elements 頁籤之外，也可以透過 Sources 查看這個網站的原始檔(也就是html、css、js檔)。不過 Sources 裡面有個非常方便的功能，叫做 Snippets ，可以讓使用者執行自訂義的js

當你發現自己上某個網站常常重複做某些動作時，這時 Snippets 就很好用。稍微會一些簡單的js，你可以自己血衣些自動化的腳本，例如自動登入之類的，不用在自己手敲啦！

利用Snippets重複執行同一個動作

Snippets頁籤自訂js腳本

如果你本身就是個工程師，那這個功能應該會很方便：測試的時候不用在一個一個點了！

你也有一些開發者工具的小撇步嗎？歡迎留言分享！