Web开发中的详细页面调试[主要是Google Chrome的F12调试功能]

如果要查看上图中的搜索框的Dom结构，可以调用F12调试工具，只需要先选择调试面板的左上角即可.

箭头按钮，然后将鼠标移到上方区域以查看结构，如下所示:

如果这是我们自己开发的网站页面，那么我们可以在右侧调整相应的Dom结构和Css样式，调整为最佳效果谷歌浏览器调试，然后将其复制到您的代码中.

控制台区域: 该区域主要是一些输出信息和网页错误信息.

当网页未达到预期效果或无法通过单击按钮触发事件时，可以首先检查“控制台”区域中是否输出错误消息. 数字.

当然谷歌浏览器调试，您独立调试的Cosole.log信息也会显示在这里.

同时，在此区域中编写自定义js语句或方法调用以调试一些js函数，如下所示:

三个. 来源区域: 此区域主要显示资源文件和与资源文件相对应的网站级目录，包括图像文件，Css样式文件，Js文件等.

四，网络区域: 该区域主要记录http或https请求的列表. 所有请求都将显示在此处，包括网页，js文件，css样式文件，图像资源和其他数据资源.

当我们向Ajax请求数据时，经常使用此区域. 发送我们的ajax请求时，我们在此列表中找到相应的请求，然后单击进入，您可以看到详细信息，包括请求参数，返回的数据等. 如下图所示

四，应用程序区域: 此区域是对象面板区域，包括浏览器中的缓存对象等. 在这里，我们最常用的方法是查看cookie信息. 如下图所示:

最后，附加博客的IT技术学习小组，并欢迎所有同事加入该小组进行指导和交流. 技术组: 872894940

Web开发中的详细页面调试[主要是Google Chrome的F12调试功能]

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/dianqi/article-184845-1.html