我們在開發前端代碼的時候經常會遇到要調試css,js代碼的時候，以前在調試的時候可能需要修改了css代碼，然后在前台看一下樣式，js也是一樣的，可能會用alert或者是console.log輸出，然后判斷哪一步出錯了，但是chrome現在提供了很方便的調試插件，可以大大提升開發效率。
一、css代碼調試
在瀏覽器上按F12可以進行調試，或者在頁面上右鍵-》審查元素也可以。然后再右邊增加，elements里面看到樣式，可以增加，刪除樣式，調試好了之后，再修改樣式文件就可以了。
如果修改內容很多的話，可以右邊的css文件進入修改界面,在里面直接編輯就可以了。
二、js代碼調試
和css代碼差不多吧，這里簡單介紹一下斷點調試
進入source，然后可以看見里面的js和css文件，雙擊js文件，可以在js文件做點點擊，設置斷點，然后按f5，加載時，會進入斷點，可以清楚的看見調試的結果。不過有時候在調試進入循環的時候，可能有100的值，也不可能一直執行下去，如果你希望直接跳到i=50的時候，你可以設置條件斷點，會在i=50的時候進入斷點，執行后面的。在斷點上右擊然后選擇Edit breakpoint，在里面輸入條件。當然你也可以在Breakpoints里臨時禁用掉一些斷點，而不用刪除斷點。
下面大家肯定還能看到DOM Breakpoints，XHR Breakpoints，Event Listener Breakpoints。
1、子節點修改；2、自身屬性修改3、自身節點被刪除，設置之后，在js做了對應的操作的時候，會在具體的地方停下來。
基本上常用的也就這么多，在調試的過程中可以用快捷鍵：F8、F10、F11或 Shitf+F11