谷歌浏览器Chrome怎么调试javascript

　　谷歌浏览器是一款由谷歌公司开发的浏览器。谷歌浏览器是一款基于其他开源软件所撰写的。下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家。

　　首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。



　　打开的开发者工具就长下面的样子,建议大家将开发者工具弹出作为一个独立的窗口:



　　1、Elements标签页

　　这个就是查看、编辑页面上的元素,包括HTML和CSS:



　　左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选;Edit as Html;直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。(注:看到上面右键菜单的最后一个选项;审查元素了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦,嘿嘿)

　　你还可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处:



　　Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:



　　你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

　　下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin)



　　注意到上面的Properties没有?这个很有用哦,可以让你看到元素具有的方法与属性,比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。

赞 (0)

相关推荐

  • Chrome浏览器的JavaScript控制台

    Chrome是Google公司开发的一款浏览器,功能比较强大,各种插件和扩展比较丰富,下面我们来看一下如何使用Chrome浏览器的Javascript控制台. 操作方法 01 启动Chrome浏览器, ...

  • 谷歌浏览器 Chrome 38正式版官方发布并提供下载

    今日，谷歌浏览器— Chrome 38正式版例行第三次小幅维护升级，具体版本更新至：38.0.2125.111，该版本例行包含大量的修正和改进。例如增加许多新的应用程序/扩展API、新的用户配置文件切 ...

  • 借助谷歌浏览器chrome的的插件批量下载网页图片

    前面两篇博客分别讲到了用迅雷批量下载网页中的图片和用火狐浏览器批量下载网页中的图片，鉴于朋友的请求，今天再来跟大家分享一个新的方法：如何使用谷歌浏览器chrome批量下载网页图片。 写完这篇文章后，批 ...

  • 有道词典如何对谷歌浏览器(Chrome)进行取词

    在本教程中，我们来看看有道词典在谷歌浏览器(Chrome)中进行取词的方法吧! 首先请确认您的电脑安装的是最新版本的有道词典，非官方渠道的“绿色版”有道词典不能在谷歌浏览器中取词，请点击这里下载安装最 ...

  • 谷歌浏览器Chrome错误提示Flash过期怎么办?

    谷歌浏览器Chrome错误提示Flash过期解决办法 首先,因为这个错误是由"Adobe Flash Player"插件引起的,所以,可以禁用此插件,但是如此一来,很多需要Adob ...

  • 谷歌浏览器Chrome错误提示Adobe Flash Player因过期而遭到阻止怎么办

    谷歌浏览器Chrome错误提示Adobe Flash Player因过期而遭到阻止怎么办 首先,因为这个错误是由"Adobe Flash Player"插件引起的,所以,可以禁用此 ...

  • 电脑谷歌浏览器chrome怎么清除浏览记录

    电脑谷歌浏览器chrome怎么清除浏览记录

    我们在使用浏览器浏览网页的时候,浏览记录会越积越多,今天就以谷歌浏览器为例,介绍一下怎么清除浏览记录.1. 打开电脑桌面上的[谷歌浏览器],找到右上方[设置]图标,点击.2.在弹出的窗口下选择[历史记 ...

  • 谷歌浏览器Chrome中的搜索引擎如何设置

    谷歌浏览器Chrome中的搜索引擎如何设置

    相信很多小伙伴都在用谷歌浏览器,今天就给大家介绍一下谷歌浏览器Chrome中的搜索引擎如何设置的具体操作步骤.1. 首先双击打开电脑上的谷歌浏览器,然后在主页右上角选择三竖点图标:2. 然后在下拉菜单 ...

  • 如何给谷歌浏览器设置允许运行javascript

    如何给谷歌浏览器设置允许运行javascript

    我们在使用谷歌浏览器的时候,想要允许运行javascript,该怎么操作呢?今天就跟大家介绍一下如何给谷歌浏览器设置允许运行javascript的具体操作步骤.1. 首先打开电脑,找到桌面上的谷歌浏览 ...