番茄系统家园 - 免费重装系统!简单装系统,人人都是装机大师!
当前位置:首页>谷歌浏览器 > 如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例

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

来源:番茄系统家园浏览:时间:2023-01-01 10:07:17

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

软件名称:
谷歌浏览器GOOGLEChrome 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自带调试工具使用方法实例,希望对大家有所帮助!更多精彩,尽在网站!

推荐系统

  • 雨林木风 winxp下载 纯净版 永久激活 winxp ghost系统 sp3 系统下载

    雨林木风 winxp下载 纯净版 永久激活 winxp ghost系统 sp3 系统下载64位
    系统大小:0MB系统类型:WinXP

    雨林木风在系统方面技术积累雄厚深耕多年,打造了国内重装系统行业知名品牌,雨林木风WindowsXP其系统口碑得到许多人认可,积累了广大的用户群体,是一款稳定流畅的系统,雨林木风 winxp下载 纯净版 永久激活 winxp ghost系统 sp3 系统下载,有需要的朋友速度下载吧。

    系统等级:
    进入下载 >
  • 萝卜家园win7纯净版 ghost系统下载 x64 联想电脑专用

    萝卜家园win7纯净版 ghost系统下载 x64 联想电脑专用64位
    系统大小:0MB系统类型:Win7

    萝卜家园win7纯净版是款非常纯净的win7系统,此版本优化更新了大量的驱动,帮助用户们进行舒适的使用,更加的适合家庭办公的使用,方便用户,有需要的用户们快来下载安装吧。

    系统等级:
    进入下载 >
  • 雨林木风xp系统 xp系统纯净版 winXP ghost xp sp3 纯净版系统下载

    雨林木风xp系统 xp系统纯净版 winXP ghost xp sp3 纯净版系统下载64位
    系统大小:1.01GB系统类型:WinXP

    雨林木风xp系统 xp系统纯净版 winXP ghost xp sp3 纯净版系统下载,雨林木风WinXP系统技术积累雄厚深耕多年,采用了新的系统功能和硬件驱动,可以更好的发挥系统的性能,优化了系统、驱动对硬件的加速,加固了系统安全策略,运行环境安全可靠稳定。

    系统等级:
    进入下载 >
  • 萝卜家园win10企业版 免激活密钥 激活工具 V2023 X64位系统下载

    萝卜家园win10企业版 免激活密钥 激活工具 V2023 X64位系统下载64位
    系统大小:0MB系统类型:Win10

    萝卜家园在系统方面技术积累雄厚深耕多年,打造了国内重装系统行业的萝卜家园品牌,(win10企业版,win10 ghost,win10镜像),萝卜家园win10企业版 免激活密钥 激活工具 ghost镜像 X64位系统下载,其系统口碑得到许多人认可,积累了广大的用户群体,萝卜家园win10纯净版是一款稳定流畅的系统,一直以来都以用户为中心,是由萝卜家园win10团队推出的萝卜家园

    系统等级:
    进入下载 >
  • 萝卜家园windows10游戏版 win10游戏专业版 V2023 X64位系统下载

    萝卜家园windows10游戏版 win10游戏专业版 V2023 X64位系统下载64位
    系统大小:0MB系统类型:Win10

    萝卜家园windows10游戏版 win10游戏专业版 ghost X64位 系统下载,萝卜家园在系统方面技术积累雄厚深耕多年,打造了国内重装系统行业的萝卜家园品牌,其系统口碑得到许多人认可,积累了广大的用户群体,萝卜家园win10纯净版是一款稳定流畅的系统,一直以来都以用户为中心,是由萝卜家园win10团队推出的萝卜家园win10国内镜像版,基于国内用户的习惯,做

    系统等级:
    进入下载 >
  • windows11下载 萝卜家园win11专业版 X64位 V2023官网下载

    windows11下载 萝卜家园win11专业版 X64位 V2023官网下载64位
    系统大小:0MB系统类型:Win11

    萝卜家园在系统方面技术积累雄厚深耕多年,windows11下载 萝卜家园win11专业版 X64位 官网正式版可以更好的发挥系统的性能,优化了系统、驱动对硬件的加速,使得软件在WINDOWS11系统中运行得更加流畅,加固了系统安全策略,WINDOWS11系统在家用办公上跑分表现都是非常优秀,完美的兼容各种硬件和软件,运行环境安全可靠稳定。

    系统等级:
    进入下载 >