chrome浏览器自带的控制台对代码调试有很强大的功能。以下总结一些在实际项目中遇到的问题，以及记录一下技巧。
1、使用Elements
使用这个可以快速定位到页面中的某个元素上，可以使用快捷键 ctrl+F 利用关键字快速查找到想要的找的元素。
在侧栏中还能够看到元素的盒模型，以及样式表。最方便的可以是在style中直接编写，可以用来调试样式的问题。我曾经试过直接在这里尝试一些样式比如字体大小或者间距什么的，如果合适就可以回到编辑器中更改代码。对于经常写样式表的人来说是一个很不错的调试工具。
2、使用console
这个对于js调试很有用。当代码出现错误，通常会出现一个红叉，表示代码出现了错误。通常控制台会给出具体的原因，通常原因一栏的右侧会有一个地址，如果是本地代码，则会出现出错代码的具体行数，点击即可跳转到错误的地方。一个js文件特别大的时候，通过这个方法能够快速定位到代码出错的地方，而不用自己瞎找浪费时间。
还有一个特别有用的地方就是，能够直接在控制台中输入部分简单的js语句，也可以输入某个变量的值，就可以直接获取到页面中某个变量值。
3、使用Sources
这个用于找资源特别方便。比如想找某个图片，可以在侧栏中找到，比如必应搜索首页中有很多精致图片，直接下载会有水印，但是通过资源直接获取图片是原图而且没有水印。
如果使用webpack打包的项目，也可以直接在这里进入代码中进行调试。
鼠标点击有行数那一栏则可以设置一个断点，当网页刷新时，代码就会停住，这个时候就可以进行我们的脚本调试啦。
当我们尝试刷新页面，会发现页面会运行到断点时停住，这个时候按住F8继续执行。如果我们按F10则是单步执行。如果是F11则是进入函数中，就可以观察到函数运行的过程。
ctrl+shift+E，被选中的代码可以再控制台中打印出console信息。ctrl+B则是取消断点。
利用这个断点可以调试代码。
4、使用Network
（更新ing）