PC端瀏覽器開發者工具妙用（1）

PC端瀏覽器都有開發者工具，比如chrome通過選項->更多工具->開發者工具，就可以打開開發者工具的界面。聽上去貌似很程序猿，當然開發者工具主要還是給程序猿們特別前端開發人員用的，不過普通用戶利用一些開發者工具的功能能顯著提升在網頁上搜集資料的效率。

現在將一些平時使用開發者工具的經驗分享給大家，希望對大家有幫助。

首先來講講elements標籤。在elements標籤下窗口可以查看網頁上各個元素，如果你了解html語言，會有助於理解這些顯示出來html元素標籤。滑鼠移到一個元素標籤上，網頁上對應的元素會變色顯示。通常一個標籤有很多層級，可以依次點開查看。

如果你喜歡頁面上某個元素的樣式，可以在style標籤裡面查看，比如可以看到圖中<a>標籤的顏色和字體等等信息，這樣方便製作自己的材料時模仿。。。

還可以用來複制一些禁止複製的頁面上的內容。比如下面這個棒文的頁面，頁面上內容無法選中，也沒有滑鼠右鍵，想複製這個標題要咋整捏。。。（中文英文還可以自己輸入，棒文應該很少有人會輸入吧。。。）

這個時候elements標籤可以幫到你。先在窗口中找到要複製元素的標籤，進入properties標籤，展開與元素標籤名一致的項目。

在展開的項目中找到innerHTML或者innerText，嘿嘿。。。可以複製了吧

另外頁面上這張圖片想扒下來（針對禁止滑鼠右鍵的頁面），也沒問題（當然可以截圖。。。不過截圖有解析度損失，而且要是遇到大小超過瀏覽器窗口大小的圖片，也截不到全圖。。。）。同樣，先找到對應的元素，然後右鍵。。。open link in new tab

然後，可以隨便搞了。。。

先寫到這裡，大家有興趣可以去操作一把。。。其他有關開發者工具的妙用歡迎關注後續的連載。。。
推薦閱讀：