接下来小编将以百度首页和新浪首页为例,手把手教大家如何使用Google浏览器自带的调试工具的具体方法步骤,这是前端调试JS与CSS样式必备,还不知道chrome自带调试工具使用方法的朋友跟着小编一起去看看吧!

软件名称:谷歌浏览器 GOOGLE Chrome 32位 v49.0.2623.75 Stable稳定安装版(支持win2003)软件大小:43MB更新时间:2016-05-17

如何使用Google浏览器自带的调试工具?

实例一:百度首页

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例
如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例
如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

实例二:新浪首页

1. 打开Chrome,打开任意一个网页,下图为新浪首页:

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

3. 鼠标右键需要修改的地方,在弹出的选项选择”检查“,如下图:

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

4. 可以看到需要改动的地方,对应区域的CSS样式都在右侧区域显示,此时在右边的代码就可以进行调试了,如下图:

如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

教程结束,以上就是关于如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例,希望对大家有所帮助!更多精彩,尽在脚本之家网站!

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: 浏览器CSS新浪Chrome谷歌百度删除
tags: 调试,自带,浏览器,首页,鼠标,工具,F12,按下,CSS,Google,chrome,图所示,实例
分页:12
转载请注明
本文标题:如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例
本站链接:https://www.codesec.net/view/569875.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(110)