大家好，今天Win10系统之家小编给大家分享「谷歌浏览器怎么调试」的知识，如果能碰巧解决你现在面临的问题，记得收藏本站或分享给你的好友们哟~，现在开始吧！

1.怎么使用chrome调试工具

全部展开

在浏览器窗口中，按F12打开调试窗口，如下所示。

调试窗口的顶部是一排选项卡，上面的每个选项都有自己不同的功能。

上图中的搜索图标(第一个圆圈)定位页面元素。

第二个手机图标适用于移动设备。

第一个选项Elements是用于定位页面元素的html源代码。在左下角，您可以使用Ctrl F搜索元素或字符串来定位元素。

第二个选项Network用于跟踪页面请求。从这里可以看到页面发送的所有请求信息，包括地址、运行时间、返回值等。

第三个选项是Source，在这里可以看到当前页面的原始代码，包括Javascript和CSS等。最后四个选项很少使用，一般不在开发中使用。

最后一个选项控制台用于输出一些调试信息。下图中可以看到当前页面中的错误会在控制台中打印出来，页面中的参数也可以在控制台中打印出来，方法可以在控制台中定义和执行。控制台是开发人员使用最多的调试工具。

在调试工具的右上角，有一些选项，通常用来设置和切换卡。打开，可以设置调试工具。如果没有必要，就不需要做任何改动。点击开关卡，调试工具将显示在新打开的窗口中。

2.前端怎么在chrome进行调试

打开Google浏览器，打开任意一个网页，这里以百度首页为例

按下F12键，能看到会弹出如下图所示的对话框

鼠标右键需要修改的地方

可以看到需要改动的地方，对应区域的CSS样式都在右侧区域显示

鼠标左键单击箭头所指区域，可添加所需的样式，并且可以实时的显示出来，当不需要时，去掉勾选即可，也可以直接按删除，制表符Tab可以自动补全属性名称

可以根据标签的id或者class值获取其属性，当提示undefined时，就需要查看是否存在这个标签值

下图显示的是进入网页所需的文件，同样的可以在里面直接修改，但不会保存到本地文件中

8

下面才是调试的重头戏，以12306购票网为例，按下F12，打开需要调试的JS文件，在行开头单击鼠标左键，打下断点，如下图所示。快捷键F11是进入下一步，shift+F11跳出进入下一步，F8跳到下一个断点，这样就可以看到每一步程序运行所显示的结果，此时可以用步骤6用到的方法来查看标签的属性

3.google 最新版本的浏览器如何进行调试

1.打开Google浏览器，打开任意一个网页，这里以百度首页为例

2.按下F12键，能看到会弹出如下图所示的对话框

3.鼠标右键需要修改的地方

4.可以看到需要改动的地方，对应区域的CSS样式都在右侧区域显示

5.鼠标左键单击箭头所指区域，可添加所需的样式，并且可以实时的显示出来，当不需要时，去掉勾选即可，也可以直接按删除，制表符Tab可以自动补全属性名称

6.可以根据标签的id或者class值获取其属性，当提示undefined时，就需要查看是否存在这个标签值

7.下图显示的是进入网页所需的文件，同样的可以在里面直接修改，但不会保存到本地文件中

8.下面才是调试的重头戏，以12306购票网为例，按下F12，打开需要调试的JS文件，在行开头单击鼠标左键，打下断点，如下图所示。快捷键F11是进入下一步，shift+F11跳出进入下一步，F8跳到下一个断点，这样就可以看到每一步程序运行所显示的结果，此时可以用步骤6用到的方法来查看标签的属性

以上就是关于「谷歌浏览器怎么调试」的全部内容，本文讲解到这里啦，希望对大家有所帮助。如果你还想了解更多这方面的信息，记得收藏关注本站~

『文★章②来自Win10系统之家wＷw.gＨＯＳｔ580.ｎｅt，转载请联系！』