Firefox 的開發者工具

markdown 最近有個爬網站的需求，就花了點時間研究一下有甚麼工具能幫助來 trace 網頁，發現 firefox 內建的開發者工具就是一個很好用的 tool，現在最常用到開發者工具兩個主要功能，來稍微介紹一下 一個是查看 html 的 DOM 結構，這裡查看的 DOM 結構不是單純看網頁原始碼可以看出來的，因為現在的網頁很多都是後來再用 javascript 處理過資料再呈現出來，開發者工具的 [Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector) 可以讓你查看經過 javascript 處理過後實際呈現在使用者眼前的 DOM Tree 還有各種 DOM 節點內的屬性。 第二個是用開發者工具的 [JavaScript Debugger](https://developer.mozilla.org/en-US/docs/Tools/Debugger) 來 trace 網頁中的 javascript。裡面有一些好用的功能例如將 minify 過的 javascript 重新排版，或是設定 breakpoint，也可以單步執行。 這兩個功能對 trace 網頁內容幫助很大，但是現在的網頁有很多其他厲害的方法去防止你爬它們網站，例如每次自動生成變數跟函數名不同的 javascript 檔案，讓你就算可以 trace，或是要寫程式去爬時也要花非常非常大的時間與精力，這個可能就只能靠經驗與熟練度來克服了。