chrome调试javascript详解


Posted in Javascript onOctober 21, 2015

一、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

Console.info()

打印以感叹号字符开始的信息,使用方法和log相同

Console.log()

打印字符串,使用方法比较类似C的printf格式输出

Console.profile()

可以以第一个参数为标识,开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似,具体可参考chrome profiles

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);

chrome调试javascript详解

console.log("%c",'padding:77px 219px; background:url(http://www.erongtu.com/application/uploads/ask/2015-10-20/5625a690f0ddd.jpg) no-repeat;line-height:166px;height:166px;');
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 上图片出不来 

chrome调试javascript详解

Firefox 41.0.2 下测试

chrome调试javascript详解

不过网上有一个有趣的东西 console.image,chrome自带的有扩展 https://github.com/jffry/console.image-chrome-extension

console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
源代码地址:https://github.com/adriancooney/console.image

2、console.info/console.log

var car = "Dodge Charger";
var someObject = {str:"Some text", id:5};
console.info("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")

chrome调试javascript详解

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");

chrome调试javascript详解

4、console.trace 在页面console文档中查看堆栈跟踪的详细介绍和示例.这个比较好用

foo();
function foo() {
 function bar() {
  console.trace();
 }
 bar();
}

chrome调试javascript详解

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]);

chrome调试javascript详解

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 + y;}
monitor(sum);
monitorEvents(window, "resize");

chrome调试javascript详解

7、debugger 非常好用的一个工具

brightness = function() { 
  debugger;  
  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();

chrome调试javascript详解

调试的时候还可以加断点什么的……

8、jquery相关  firequery

$.fn.log = function() {
  if (window.console && console.log) {
    console.log(this);
  }
  return this;
}
$('foo.bar').find(':baz').log().hide();

这样就可以 easily check inside jQuery chains.

 chrome调试javascript详解

四、相关资源

Firefox
http://getfirebug.com/
(you can also now use Firefox's built in developer tools Ctrl+Shift+J (Tools > Web Developer > Error Console), but Firebug is much better; use Firebug)
Safari and Chrome
Basically the same.
https://developer.chrome.com/devtools/index
https://developer.apple.com/technologies/safari/developer-tools.html
Internet Explorer
Don't forget you can use compatibility modes to debug IE7 and IE8 in IE9 or IE10
http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx
If you must access the console in IE6 for IE7 use the Firebug Lite bookmarklet
http://getfirebug.com/firebuglite/ look for stable bookmarklet
http://en.wikipedia.org/wiki/Bookmarklet
Opera
http://www.opera.com/dragonfly/
iOS
Works for all iPhones, iPod touch and iPads.
http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
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, Android
Both of these have no console built in and no bookmarklet ability. So we use http://jsconsole.com/type :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 Android
You can also use http://html.adobe.com/edge/inspect/ to access web inspector tools and the console on any device using their convenient browser plugin.
Older browser problems
Lastly 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.
http://stackoverflow.com/questions/4539253/what-is-console-log
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
https://developers.google.com/chrome-developer-tools/docs/console-api
http://getfirebug.com/wiki/index.php/Console_API
https://developer.chrome.com/devtools/docs/console-api
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html
 https://developer.mozilla.org/zh-CN/docs/Web/API/Console

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
扩展String功能方法
Sep 22 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
js前端图片加载异常兜底方案
Jun 21 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 #Javascript
深入解析JavaScript的闭包机制
Oct 20 #Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 #Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 #Javascript
javascript省市级联功能实现方法实例详解
Oct 20 #Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 #Javascript
js点击文本框后才加载验证码实例代码
Oct 20 #Javascript
You might like
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php查询操作实现投票功能
2016/05/09 PHP
php-msf源码详解
2017/12/25 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
中学生获奖感言
2014/02/04 职场文书
三字经教学反思
2014/04/26 职场文书
团代会开幕词
2015/01/28 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
幼儿园小班班务总结
2015/08/03 职场文书