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 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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实现获取图片颜色值的方法
2014/07/11 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
js随机颜色代码的多种实现方式
2013/04/23 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
降价通知函
2015/04/23 职场文书
鲁冰花观后感
2015/06/10 职场文书
患者身份识别制度
2015/08/06 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
详解MySQL中的主键与事务
2021/05/27 MySQL
redis缓存存储Session原理机制
2021/11/20 Redis
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers