14,958
edits
| Line 61: | Line 61: | ||
== 網頁製作相關工具 == | == 網頁製作相關工具 == | ||
* | === 開發人員工具 === | ||
* 網頁主控台 for {{Fx}} v.6 內建工具,選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 {{kbd | key=Control}}+{{kbd | key=Shift}}+{{kbd | key=K}} | |||
* [ | ** [https://developer.mozilla.org/en/Using_the_Web_Console Using the Web Console - MDN] | ||
* [https://addons.mozilla.org/zh-TW/firefox/addon/1815/ Console²] "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context,意指 Chrome, Content) 來篩選要顯示的錯誤訊息" | * 開發人員工具 for {{Chrome}} 內建工具,選單位置位於: 工具 -> 開發人員工具、 或者直接按快速鍵 {{kbd | key=Control}}+{{kbd | key=Shift}}+{{kbd | key=I}} | ||
* [https://addons.mozilla.org/zh-TW/firefox/addon/1815/ Console²] {{Fx}} "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context,意指 Chrome, Content) 來篩選要顯示的錯誤訊息" | |||
=== view source codes of html === | === view source codes of html === | ||
| Line 82: | Line 80: | ||
* [https://chrome.google.com/webstore/detail/ipooogmmnpmfmhbhlahhjkjiiamjllal What's the font?] for {{Chrome}} 選擇網頁一段文字,檢視使用的字型 | * [https://chrome.google.com/webstore/detail/ipooogmmnpmfmhbhlahhjkjiiamjllal What's the font?] for {{Chrome}} 選擇網頁一段文字,檢視使用的字型 | ||
=== 其他工具 === | |||
* [http://karmatics.com/aardvark/ Aardvark Firefox Extension] {{Fx}} | |||
* [http://karmatics.com/aardvark/bookmarklet.html Running Aardvark as a bookmarklet] in {{Fx}}, {{IE}} or {{Safari}} | |||
* [http://www.iosart.com/firefox/colorzilla/ ColorZilla Extension for Firefox and Mozilla] {{Fx}} | |||
* [http://www.kevinfreitas.net/extensions/measureit/ MeasureIt]: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. {{Fx}} | |||
* [https://addons.mozilla.org/zh-TW/firefox/addon/user-agent-rg/?src=discovery-learnmore User Agent RG] for {{Fx}} | |||
* [https://addons.mozilla.org/zh-TW/firefox/collections/mozilla/webdeveloper/ Web Developer's Toolbox :: 收藏集] for {{Fx}} | |||
* [https://chrome.google.com/webstore?hl=zh-TW&category=ext%2F11-web-development 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店] | |||
---- | |||
further reading | further reading | ||
* [http://www.w3schools.com/css/css_reference.asp CSS2 Reference] | * [http://www.w3schools.com/css/css_reference.asp CSS2 Reference] | ||