番茄系統(tǒng)家園 - 免費(fèi)重裝系統(tǒng)！簡單裝系統(tǒng)，人人都是裝機(jī)大師！
當(dāng)前位置：首頁>谷歌瀏覽器 > 谷歌瀏覽器怎么調(diào)試js？谷歌瀏覽器調(diào)試javascript教程圖文詳解

谷歌瀏覽器怎么調(diào)試js？谷歌瀏覽器調(diào)試javascript教程圖文詳解

來源：番茄系統(tǒng)家園瀏覽：時(shí)間：2023-02-07 15:49:43

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

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

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

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

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

1、Elements标签页

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

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

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

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

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

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

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

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

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

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

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

2、Resources标签页

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

3、Network标签页

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

4、Scripts标签页

很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

还有你可以打开Javascript控制台，做一些其他的查看或者修改：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

你甚至还可以为某一XHR请求或者某一事件设置断点：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

5、Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

点击底部的Record就可以开始录制页面上执行的内容。

6、Profiles标签页

这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

7、Audits标签页

这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

8、Console标签页

就是Javascript控制台了：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。

例如我想查看console都有哪些方法和属性，我可以直接在Console中输入;并执行：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：

谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解

（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）

Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。

推薦系統(tǒng)

  • 雨林木風(fēng) winxp下載 純凈版 永久激活 winxp ghost系統(tǒng) sp3 系統(tǒng)下載

    雨林木風(fēng) winxp下載 純凈版 永久激活 winxp ghost系統(tǒng) sp3 系統(tǒng)下載64位
    系統(tǒng)大小：0MB系統(tǒng)類型：WinXP

    雨林木風(fēng)在系統(tǒng)方面技術(shù)積累雄厚深耕多年，打造了國內(nèi)重裝系統(tǒng)行業(yè)知名品牌，雨林木風(fēng)WindowsXP其系統(tǒng)口碑得到許多人認(rèn)可，積累了廣大的用戶群體，是一款穩(wěn)定流暢的系統(tǒng)，雨林木風(fēng) winxp下載 純凈版 永久激活 winxp ghost系統(tǒng) sp3 系統(tǒng)下載，有需要的朋友速度下載吧。

    系統(tǒng)等級(jí)：
    進(jìn)入下載 >

  • 蘿卜家園win7純凈版 ghost系統(tǒng)下載 x64 聯(lián)想電腦專用

    蘿卜家園win7純凈版 ghost系統(tǒng)下載 x64 聯(lián)想電腦專用64位
    系統(tǒng)大?。?/em>0MB系統(tǒng)類型：Win7

    蘿卜家園win7純凈版是款非常純凈的win7系統(tǒng)，此版本優(yōu)化更新了大量的驅(qū)動(dòng)，幫助用戶們進(jìn)行舒適的使用，更加的適合家庭辦公的使用，方便用戶，有需要的用戶們快來下載安裝吧。

    系統(tǒng)等級(jí)：
    進(jìn)入下載 >

  • 雨林木風(fēng)xp系統(tǒng) xp系統(tǒng)純凈版 winXP ghost xp sp3 純凈版系統(tǒng)下載

    雨林木風(fēng)xp系統(tǒng) xp系統(tǒng)純凈版 winXP ghost xp sp3 純凈版系統(tǒng)下載64位
    系統(tǒng)大?。?/em>1.01GB系統(tǒng)類型：WinXP

    雨林木風(fēng)xp系統(tǒng) xp系統(tǒng)純凈版 winXP ghost xp sp3 純凈版系統(tǒng)下載，雨林木風(fēng)WinXP系統(tǒng)技術(shù)積累雄厚深耕多年，采用了新的系統(tǒng)功能和硬件驅(qū)動(dòng)，可以更好的發(fā)揮系統(tǒng)的性能，優(yōu)化了系統(tǒng)、驅(qū)動(dòng)對(duì)硬件的加速，加固了系統(tǒng)安全策略，運(yùn)行環(huán)境安全可靠穩(wěn)定。

    系統(tǒng)等級(jí)：
    進(jìn)入下載 >

  • 蘿卜家園win10企業(yè)版 免激活密鑰 激活工具 V2023 X64位系統(tǒng)下載

    蘿卜家園win10企業(yè)版 免激活密鑰 激活工具 V2023 X64位系統(tǒng)下載64位
    系統(tǒng)大?。?/em>0MB系統(tǒng)類型：Win10

    蘿卜家園在系統(tǒng)方面技術(shù)積累雄厚深耕多年，打造了國內(nèi)重裝系統(tǒng)行業(yè)的蘿卜家園品牌，(win10企業(yè)版,win10 ghost,win10鏡像),蘿卜家園win10企業(yè)版 免激活密鑰 激活工具 ghost鏡像 X64位系統(tǒng)下載,其系統(tǒng)口碑得到許多人認(rèn)可，積累了廣大的用戶群體，蘿卜家園win10純凈版是一款穩(wěn)定流暢的系統(tǒng),一直以來都以用戶為中心，是由蘿卜家園win10團(tuán)隊(duì)推出的蘿卜家園

    系統(tǒng)等級(jí)：
    進(jìn)入下載 >

  • 蘿卜家園windows10游戲版 win10游戲?qū)I(yè)版 V2023 X64位系統(tǒng)下載

    蘿卜家園windows10游戲版 win10游戲?qū)I(yè)版 V2023 X64位系統(tǒng)下載64位
    系統(tǒng)大小：0MB系統(tǒng)類型：Win10

    蘿卜家園windows10游戲版 win10游戲?qū)I(yè)版 ghost X64位 系統(tǒng)下載，蘿卜家園在系統(tǒng)方面技術(shù)積累雄厚深耕多年，打造了國內(nèi)重裝系統(tǒng)行業(yè)的蘿卜家園品牌，其系統(tǒng)口碑得到許多人認(rèn)可，積累了廣大的用戶群體，蘿卜家園win10純凈版是一款穩(wěn)定流暢的系統(tǒng),一直以來都以用戶為中心，是由蘿卜家園win10團(tuán)隊(duì)推出的蘿卜家園win10國內(nèi)鏡像版，基于國內(nèi)用戶的習(xí)慣，做

    系統(tǒng)等級(jí)：
    進(jìn)入下載 >

  • windows11下載 蘿卜家園win11專業(yè)版 X64位 V2023官網(wǎng)下載

    windows11下載 蘿卜家園win11專業(yè)版 X64位 V2023官網(wǎng)下載64位
    系統(tǒng)大?。?/em>0MB系統(tǒng)類型：Win11

    蘿卜家園在系統(tǒng)方面技術(shù)積累雄厚深耕多年，windows11下載 蘿卜家園win11專業(yè)版 X64位 官網(wǎng)正式版可以更好的發(fā)揮系統(tǒng)的性能，優(yōu)化了系統(tǒng)、驅(qū)動(dòng)對(duì)硬件的加速，使得軟件在WINDOWS11系統(tǒng)中運(yùn)行得更加流暢，加固了系統(tǒng)安全策略，WINDOWS11系統(tǒng)在家用辦公上跑分表現(xiàn)都是非常優(yōu)秀，完美的兼容各種硬件和軟件，運(yùn)行環(huán)境安全可靠穩(wěn)定。

    系統(tǒng)等級(jí)：
    進(jìn)入下載 >

熱門系統(tǒng)

常用系統(tǒng)