TOOLS
瀏覽器的Developer Tools

developer tools

寫網頁時每次改完Code都要Save再Refresh實在有點麻煩,有時上了Production, 才見到因為Production Data而出現的顯示問題,修改要先Get Production的Data到Local,再做Testing就更更麻煩。

嫌麻煩的話,用Developer Tools就可以在瀏覽器即時修改並見到結果!只想測試下修改HTML/CSS/JS的話,一定要善用這些工具!

瀏覽器

  1. Internet Explorer
  2. Chrome
  3. Firefox

以下只介紹本人常用到的功能

Internet Explorer

ie

Version: 10
開啟方法: 按[F12] 或 選[Tools]>[F12 developer tools]

雖然IE的Developer Tools不及其他Browser方便,但在解決IE的Display問題時也是有用的 XD

選取元素

IE選取元素

Click頁面的Element就會選擇到HTML的位置,並且會顯示該Element的CSS,在寫Wordpress Theme時十分實用。

文件模式

IE文件模式

可選不同IE Version的模式,我用的就有IE 5/7/8/9/10。

HTML

IE HTML

可修改版面的HTML內容,常用的是加Element的Attributes。

CSS

IE CSS

可修改Stylesheet的內容,比較不便的是不能加新的Attribute,只能改本來在Stylesheet就有的Attribute。

如果想改特定的Part而又沒有在Stylesheet Define的話,就只能Inline改。

主控台

IE Console

測試JavaScript Function Return Result,查看Page Error。

在版面由多個iFrame組成時,要先用window.frames[0]選Frame再測試。

Chrome

chrome

Version: 38
開啟方法: 按[CTRL]+[SHIFT]+[J]或選[選單]>[更多工具]>[開發人員工具]

Select

chrome select

Click頁面的Element就會選擇到HTML的位置

Toggle Device Mode

chrome toggle device mode

進入其他器材的模式。

例如選擇iPhone 6,就會進入iPhone 6的模式,網頁會Load iPhone的Setting,另外版面大小也當然會更改。

記住每次選完不同Device後都要Refresh下頁面才見到正確的結果!

Elements

chrome element

修改頁面HTML和CSS。在HTML部分選擇了Element後,右邊也會出現相關的Style,版面也會Highlight了選擇的部分並顯示該Element的大小。

選擇ELEMENT後再按Styles那邊的[+] Button就會加Element到Styles,並顯示為inspector-stylesheet。

可以在Styles欄位修改,如果該Style Rule是無效的話,會有刪除線的。

修改完成想取得修改過的所有Style資料可按inspector-stylesheet連結。

Network

chrome network

查看Load各資料檔案要用的時間和順序,也可Disable Cache。

Console

chrome console

都是測試JavaScript和查看Page Error。
另外可選不同Frame,在版面由多個iFrame組成時,記住要先選Script執行的Frame再輸入!

Firefox

Firefox

Version: 33
開啟方法: 按[CTRL]+[SHIFT]+[I]或選[選單]>[開發者]

挑選頁面中的元素

挑選頁面中的元素

Click頁面的Element就會選擇到HTML的位置。

檢測器

檢測器

修改頁面HTML和CSS。在HTML部分選擇了Element後,右邊也會出現相關的Style,版面也會Highlight了選擇的部分並顯示該Element的大小。選擇Element後再Right Click Style元素選新增規則就會加Element到Styles,並顯示為行內。
可以在Styles欄位修改,最新增的Style Rule會有刪除線。

主控台

主控台

都是測試JavaScript和查看Page Error。
在版面由多個iFrame組成時,要先用window.frames[0]選Frame再測試。

網路

網路

查看LOAD各資料檔案要用的時間和順序。

其實早幾天Firefox推出了個Developer Edition,是針對Web開發者所打造,唯一專屬於開發者的瀏覽器 ←照抄官網XD

快快試用吧~~

總結

各瀏覽器的開發者工具功能也大同小異,小妹Development時基本都只用一個,測試時才再用其他Browser。

我習慣用Chrome,現在也在試Firefox的Developer Edition。

因本人不是做Development時也開著Developer Tools,所以已不能想像沒有Developer Tools的生活啦 XD

One thought on “瀏覽器的Developer Tools

  • Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">