谷歌浏览器调试技巧【一】查看被压缩的css和js的压缩，并进行修改

1.选中按钮选中状态

在element中鼠标右键，选择：active

2.监听动态元素的变化

在element中鼠标右键，选择：Break选项中的subtree modification  ↵

 

选中后，在debugger模式下进行调试

3.触发事件监听

选择element元素后，点击右侧Event Listener，再点击右侧的蓝色字体就可查看触发的事件

4.设置console的过滤【可以在Filter中输入正则匹配和选择url，也可以全部选中不过滤】

5.查看被压缩的css和js的压缩，并进行修改

点击pretty print,即可展开 ,并且可以直接在上面修改，立即生效

6.查看整站的加载资源，方便直接复制图片和资源

选中source后，在选中network就可以查看整站资源

7.断点调试

在某行js代码打好断点，再次刷新就可以看到最右侧的Call Stack中的代码堆栈

8.直接在谷歌浏览器中进行代码修改

在sources中选中Filesystem,再点击Add folder to workspace,加入当前的文件，再选择文件夹，之后就可以直接修改，保存就生效了