chrome调试javascript详解
我的图书馆
chrome调试javascript详解
这篇文章主要介绍了chrome调试javascript详解,需要的朋友可以参考下
一、Console API
Console.assert()
判断第一个参数是否为真，false的话抛出异常并且在console输出相应信息。
Console.count()
以参数为标识记录调用的次数，调用时在console打印标识以及调用次数。
Console.debug()
console.log方法的别称，使用方法可以参考Console.log()
Console.dir()
打印一条以三角形符号开头的语句，可以点击三角展开查看对象的属性。
Console.error()
打印一条错误信息，使用方法可以参考 string substitution。
Console._exception()
error方法的别称，使用方法参考Console.error()
Console.group()
打印树状结构，配合groupCollapsed以及groupEnd方法;
Console.groupCollapsed()
使用方法和group相同，不同的是groupCollapsed打印出来的内容默认是折叠的。
Console.groupEnd()
结束当前Tree
打印以感叹号字符开始的信息，使用方法和log相同
Console.log()
打印字符串，使用方法比较类似C的printf格式输出
Console.profile()
可以以第一个参数为标识，开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似，具体可参考chrome
Console.profileEnd()
配合profile方法，作为数据收集的结束。
Console.table()
将数据打印成表格。Console.table [en-US]
Console.time()
计时器，接受一个参数作为标识。
Console.timeEnd()
接受一个参数作为标识，结束特定的计时器。
Console.trace()
打印stack trace.
Console.warn()
打印一个警告信息，使用方法可以参考 string substitution。
1、Console.log
if(!window.console){ window.console = {log: function(){} }; }
var someObject = { str: "Some text", id: 5 };
console.log(someObject);
//Object {str: "Some text", id: 5}
%s 格式string%d or %i&&& 格式int%f& 格式float%o& 格式Object对象%O&
格式object对象%c& 格式css
console.log("%o",document.body);
console.log("%O",document.body);
console.log("%c",'padding:77px 219 background:url(/application/uploads/ask//ddd.jpg) no-line-height:166height:166');
console.log("%d",5+5);
console.log("%f",Math.PI);
console.log("%s","This is a good idea");
console.log("%cCss Style","text-shadow:1px 1px 1px rgba(0,0,0,2);font-size:40px");
Google chrome 46.0.2490.71 m 上图片出不来&
Firefox 41.0.2 下测试
不过网上有一个有趣的东西 console.image，chrome自带的有扩展
console.image("");console.image("");console.image("");console.image("");源代码地址：
2、/console.log
var car = "Dodge Charger";var someObject = {str:"Some text",
id:5};<("My first car was a", car, ". The object is: ",
someObject);&for (var i=0; i&5; i++) {& console.log("Hello, %s.
You've called me %d times.", "Bob", i+1);}console.log("I want to print a
number:%d","string")
3、console.group/console.warn/console.time/console.debug
console.log("This is the outer
level");console.group();console.log("Level
2");console.group();console.log("Level 3");console.warn("More of
level 3");console.groupEnd();console.log("Back to level
2");console.groupEnd();console.debug("Back to the outer
level");console.time("answer time");alert("Click to
continue");console.timeEnd("answer time");
4、console.trace 在页面console文档中查看堆栈跟踪的详细介绍和示例.这个比较好用
function foo() {
function bar() {
console.trace();
5、console.assert/console.count/console.dirxml/console.dir/console.error
var list = document.querySelectorAll('div.rtmarg');
console.assert(list[0].childNodes.length & 10 , "Oops,this is small");
function login(user) {
console.count("Login called for user '" + user + "'");
login("join");
login("join");
login("join");
login("chen");
console.dir(document.body);
function connectToServer() {
var errorCode = 1;
if (errorCode) {
console.error("Error: %s (%i)", "Server is not responding", 500);
connectToServer();
var list = document.querySelectorAll("div.rtmarg");
console.dirxml(list[0]);
6、Other Command Line API
inspect(document.body.firstChild);
getEventListeners(document);
var player1 = {
"name": "Ted",
"level": 42}
keys(player1);
function sum(x, y) {
return x +}
monitor(sum);
monitorEvents(window, "resize");
7、debugger 非常好用的一个工具
brightness = function() {
var r = Math.floor(this.red*255);
var g = Math.floor(this.green*255);
var b = Math.floor(this.blue*255);
return (r * 77 + g * 150 + b * 29) && 8;
brightness();
调试的时候还可以加断点什么的……
8、jquery相关& firequery
$.fn.log = function() {
if (window.console && console.log) {
console.log(this);
$('foo.bar').find(':baz').log().hide();
这样就可以 easily check inside jQuery chains.
四、相关资源
Firefox(you can also now
use Firefox's built in developer tools Ctrl+Shift+J (Tools & Web Developer
& Error Console), but Fi use Firebug)Safari and
ChromeBasically the same.Internet
ExplorerDon't forget you can use compatibility modes to debug IE7 and IE8 in
IE9 or IE10If
you must access the console in IE6 for IE7 use the Firebug Lite
bookmarklet
look for stable bookmarkletOperaiOSWorks
for all iPhones, iPod touch and iPads.Now
with iOS 6 you can view the console through Safari in OS X if you plug in your
device. Or you can do so with the emulator, simply open a Safari browser window
and go to the "Develop" tab. There you will find options to get the Safari
inspector to communicate with your device.Windows Phone, AndroidBoth of
these have no console built in and no bookmarklet ability. So we use
:listen and it
will give you a script tag to place in your HTML. From then on you can view your
console inside the jsconsole website.iOS and AndroidYou can also use
to access web inspector tools and the console on any device using their
convenient browser plugin.Older browser problemsLastly older browsers
(thanks again Microsoft) will crash if you use console.log in your code and not
have the developer tools open at the same time. Luckily its an easy fix. Simple
use the below code snippet at the top of your code and good old IE should leave
you alone:&if(!window.console){ window.console = {log: function(){} };
}This checks to see if the console is present, and if not it sets it to an
object with a blank function calledlog. This way window.console and
window.console.log is never truly undefined.&
您可能感兴趣的文章:
发表评论：
馆藏&37104
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&Google Chrome浏览器调试功能介绍 - jack_Meng - 博客园
随笔 - 669, 文章 - 1, 评论 - 87, 引用 - 0
作为Web开发人员，我为什么喜欢Google Chrome浏览器
【原文地址：&】
在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。
在Chrome出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是Javascript执行速度（现在的FireFox4也比之前的FireFox3有很大的进步）。不过当时由于Chrome的开发者工具还不是很完善，而我又不是很熟悉，加之对于Firebug的好感和依赖，当时还是用回FireFox作为我的主浏览器。
后来由于开发Chrome的插件(现在的FaWave)，就一直使用Google Chrom作为我的主浏览器，渐渐熟悉Chrome的开发者工具，而Chrome也一直在快速迭代，快速进步中，到现在，Chrome已经绝对成为我的主浏览器，Chrome的开发者工具，我也认为比Firebug更好用。
得益于Google V8的快速，和对HTML5和CSS3的支持也算比较完善，html类的富客户端应用Chrome上无论是流畅性还是呈现的效果，都是比较出色的，这对于开发者，特别是对于那些喜欢研究前沿技术的前端开发者来说，是很重要的。
对于本文，作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用。
怎样打开Chrome的开发者工具？
你可以直接在页面上点击右键，然后选择审查元素：
或者在Chrome的工具中找到：
或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。
打开的开发者工具就长下面的样子：
不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：
下面来分别说下每个Tab的作用。
Elements标签页
这个就是查看、编辑页面上的元素，包括HTML和CSS：
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项"审查元素"了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：
注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。
Resources标签页
Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：
Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。
Scripts标签页
很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：
还有你可以打开Javascript控制台，做一些其他的查看或者修改：
你甚至还可以为某一XHR请求或者某一事件设置断点：
Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：
点击底部的Record就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）
Profiles标签页
这个主要是做性能优化的，包括查看CPU执行时间与内存占用：
这个也不熟悉，不多说，还是请参考文末链接吧。
Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦（相当与）：
点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：
它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：
Console标签页
就是Javascript控制台了：
这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：
怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：
（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）
Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。
注1：本文截图的Chrome版本为：13.0.782.215 m注2：Chrome开发者工具更详细的说明请参考：注3：本文原来想定的标题是：给那些因为Firebug而舍不得FireFox的朋友