F12调试代码

F12调试代码

在WEB开发中，我们经常会使用谷歌浏览器进行调试，一下是我对于谷歌浏览器调试的一些总结，截图的是中文界面大家电脑是英文的可以对照一下。

如下图：

1. 元素可以看页面的布局情况。
2. 控制台可以console.log()打印数据用于调试，尤其是后端传回json数据的时候，便于查看以及在前端进行渲染。
3. 源代码用于查看源码文件，我用的不多，一般都直接回去编译环境看代码。可能方便定位错误代码在哪一行。
4. 网络用于调试前后端接口是否正常通，以及图片，js文件等引入是否正常；比postman等软件更方便一点。一般有异常的是红色的，可以点击进行看详细情况。
5. 还有谷歌F12好像可以直接断点调试，我用的不多，忘记了。大家可以去百度一下。（上图供参考）