chrome调试js工具的使用





Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow):

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

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

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

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


实时修改 js 代码生效
页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
注意
经测试不支持 html 页面中 js 修改
经过 Pretty print 格式化的脚本不支持修改
Control + O查看js文件
Contro + shift + O 查看当前文件中的js方法
Control + F 按关键字搜索当前文件
Ctrol + shift + F 按关键字搜索所有文件
chrome调试js工具的使用的更多相关文章
- Google Chrome调试js代码,开发者工具之调试工具常用功能
参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- Google Chrome 调试JS简单教程[更新]
题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本 ...
- Google Chrome调试js入门
平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...
- VS Code - Debugger for Chrome调试js
最近在自学一些s的内容,用到了vscode来编写代码,一直没有使用过vs调试js的代码,看到左侧有推荐一个插件Debugger for Chrome使用来调试js代码的,对于vs这种开源,需要安装各种 ...
- Javascript系列: Google Chrome调试js代码(zz)
你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
- Google Chrome调试js代码
你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
- [转]谷歌Chrome浏览器开发者工具教程—JS调试篇
来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
随机推荐
- Linux-lsof命令
lsof,List Open Files 列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件(lsof强大原因).所以 ...
- vc++ mfc 里保存缩放的bmp图片 不失真
void CSaveView::OnFileSave() { BITMAP info;//原始图片 m_bitmap.GetBitmap(&info); CDC DC1; DC1.Create ...
- pip使用报错【cannot import name HTTPSHandler】
python2.7,报错如下: Traceback (most recent call last): File "/usr/local/bin/pip", line 9, in & ...
- ABBYY PDF Transformer+从文件选项中创建PDF文档的教程
可使用OCR文字识别软件ABBYY PDF Transformer+从Microsoft Word.Microsoft Excel.Microsoft PowerPoint.HTML.RTF.Micr ...
- linux服务之httpd
http://mirrors.cnnic.cn/apache/httpd/docs/ 英文pdf文档下载 Apache HTTP Project’s goal It is the Apache HTT ...
- php 开启COM组件
1.先到PHP.INI中打开COM选项,com.allow_dcom = true 2.我这里的环境是PHP5.4.7,PHP 5.4.5后,com/dotnet 模块已经成了单独的扩展,所以需要在P ...
- VS 2010 编译安装 boost 库 -(和 jsoncpp 库共存)
boost库的简单应用很容易,网上有很多资料,但是,如果要json 和 boost 一起使用就会出现这样那样的问题, 有时候提示找不到 “libboost_coroutine-vc100-mt-sgd ...
- js页面取值的三种方式
<input id=""<radio <checkbox<div<img对于这些标签内参数取值,一般分为三种类型:一.有关id取值用 #:取id处的v ...
- 【linux】 linux 查看系统信息
1.输入"uname -a ",可显示电脑以及操作系统的相关信息. 2.输入"cat /proc/version",说明正在运行的内核版本. 3.输入" ...
- 如何将NetBeans转换为英文版(图)
很郁闷,又是一个系统语言的问题. NetBeans下载下来之后,怎么装都是个中文版,或者半中文半英文,不伦不类的.上网找了一个圈,很多都讲得不清楚,最后终于有了一个答案: 在NetBeans的配置文件 ...