前言：

從事網站開發已經四年多(研究所2年、就業2年多)，雖然多數都是後端開發，但因為是網站開發，我必須多少需要學習CSS與JavaScript基礎，協助調整畫面與簡單作一些前端處理(如防呆、套件處理...等)。

三年前經由同學介紹與自學，知道能夠使用瀏覽器工具進行簡單的測試與修改。
這一篇紀錄如何使用瀏覽器(Google Chrome)進行CSS測試與JavaScript Debug的簡易方法：


操作：

CSS Test:

Step 1. 按下F12，Chrome出現開發者工具
            Press F12 in Google Chrome, and you will see  Developer Tools.




Step 2.在Elements頁籤，您可以看見網頁所有元素(html與javascipt原始碼)
            You could see all element of html(html and javascript source code) in Element tab.



Step 3.在右邊的欄位可以看見網頁樣式、CSS檔案名稱與style設定在CSS檔案行數
            You could see style In the column on the right.


Step 4. 選擇左邊放大鏡，點選網頁區塊。在Element頁籤下可以看見該區塊的程式碼；style部分，可以看見style與css檔案名字、位置。
            Select Magnifier icon, and then click section of web site. You could see html code of section   of web site in Element tab; You could see style , CSS file name, and number of lines of style in css file in style tab


Step 5. 嘗試修改右邊style內容，網頁匯依據您修改的內容變更。
             You can try to add or modify style. web site will change according to your setting



當網頁版面錯亂，就可以利用這種方式找到哪裡的style 或css寫錯，或者繼承過程中錯亂，
藉由修改右邊style進行測試，正確顯示後，在修改CSS檔案即可。


JavaScipt Debug

Step 1. 按下F12，Chrome出現開發者工具。
            Press F12 in Google Chrome, and you will see  Developer Tools.
            選取Source 頁籤，找到想要debug的js檔案。
            Select Source tab, and choose js file you want to debug.



Step 2. 在想要Debug的行數點一下，送出表單。
             click the row you want to debug, and then submit the form.


Step 3.上方出現"pasug in debugger"圖示；在Soruce tab內，滑鼠移動到的變數，會顯示內容；
            右方可以檢視目前物件所有變數。
            There is a icon "pause in debugger" on the top; In Source Tab, it display value of variable   when  you mouse over them；You could see all variable  in the column on the right.




Step 4. 點選"setp over next function call"，程式將會執行下一步。
            click "setp over next function call"，and it will jump to the next line
            您也可以直接修改js程式，繼續執行Debug。
            you also modify js in source tab, and then continue Debug




結論：

藉由Chrome Developer Tools相關功能，我們可以進行網頁樣式的修改與JavaScript的Debug，讓我們在執行套版或撰寫js程式過程更加順利。

--
謝謝！