[程式分析]GoogleChrome開發者工具(Developer Tools)

「Google Chrome Developer Tools 開發者工具」

網站製作者常會需要對網頁進行DEBUG工具,其實在Google Chrome中就已經內建了,在 Google Chrome 瀏覽器中提供了一個 DevTools 網頁開發人員工具,它可以讓網頁開發者非常方便的在上面測試網頁或除錯叫做Google Chrome Developer Tools 開發者工具
只要用Chrome開啟任一網頁按下「Ctrl+Shift+I」就會開始這個開發者工具。
滑鼠,按右鍵點「檢查元素」也可以開啟。

如上圖,會跳出一個Developer Tools開發者工具。這時候我們就可以來好好利用這個工具囉!

googledev-1

 

可以讓他固定在瀏覽器的下方,也可以獨立出一個視窗。只要點開發者工具視窗的右上角,第一個(視窗圖案)按鈕,就可以了。

googledev-2

可以直接對CSS樣式表更改參數,畫面就會直接可以預覽

googledev-3

將前面勾去掉即可暫時關閉語法效果

googledev-4

 

googledev-5

 

滑鼠在語法列點一下左鍵即可增加或修改

 

googledev-6

 

也支援自動輸入.只要KEY第一個字母.系統就會帶出相關的關鍵字語法.非常方便使用

 

Related Post

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *