chrome控制台调试学习笔记 暂未整理

简介: 15:03 2015/12/7chrome控制台调试学习:推荐博客:http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.htmlconsole.


15:03 2015/12/7
chrome控制台调试学习:
推荐博客:http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
console.log 普通提示信息,可以自己打印需要的内容或变量
可以结合%c进行格式定制:console.log('%chello world','font-size:25px;color:red;');
也可以结合css改变输出样式
可以多个参数,它会自动以空格分开进行输出:console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');
console.error 打印错误类信息
console.warn 打印警告类错误
console.info 打印提示信息
console.group
xonsole.groupEnd(适合于开发一个规模很大的模块,功能很复杂的时)
例子:
console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

console.assert if表达式的实现
例子:
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');
xonsole.count 用于统计某段代码被执行的次数
例子:
function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数:');
}
foo(); // 调用上面的函数查看效果
xonsole.dir 将DOM节点以JS对象的形式输出,console.log是直接以DOM树的结构进行输出
console.dir(document.body);
console.log(document.body);
console.time & console.timeEnd // 做性能测试时查看执行耗时
例子:
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
console.profile & console.timeLime
console.profile & console.profileEnd 查看CPU使用相关信息(开发工具的Tab就是的)
console.timeLime & console.timeEnd 时间轴
console.trace 堆栈跟踪相关的调试,代码被打断点后面板中可以查看堆栈相关信息
以上是挂载在window.console这个对象下的 统称Console API。
接下来是控制台中使用的 统称Command Line API。
$_ 返回最后一次表达式的执行结果 和按向上键的效果一样
例子:
2+2//回车,再
$_+1//回车得5
$0-$4表示最近5个你选择过的DOM节点,最多保存5个
$('body') 支持Jqeury选择器选择 但是$(selector)返回的是满足选择条件的首个DOM元素。是原生JavaScript document.querySelector() 的封装
$$(selector) 返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll() 的封装
copy 将控制台获取的值复制到剪贴板
例子:
copy(document.body)
但是这里的控制台命令只能在控制台中环境中执行,因为他不依附于任何全局变量比如window,所以其实在JS代码里是访问不了这个copy方法的,所以从代码层面来调用复制功能也就无从谈起
key & values
前者返回对象所有属性名组成的数据 后者返回所有属性值组成的数组
var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tboy);
values(tboy);
monitor & unmonitor
接收一个函数名,每次该函数被执行之后控制台都会输出一条信息 包括函数名和传入的参数
function sayHello(name){
alert('hello,'+name);
}
monitor(sayHello);
sayHello('wayou');
unmonitor(sayHello);
sayHello('wayou');
debug & undebug
debug同样也是接收一个函数名作为参数。
当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,
可以通过debugger来做到,同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。
而undebug 则是解除该断点。
查看ajax请求相关信息:点击console,点击清楚记录,再刷新请求会出现ajax请求的url,直接点击就可以进入url网页查看模式,查看数据,可以用json格式化工具查看json数据格式
js直接测试
css实时测试
看时间
http
....

相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
5月前
|
JavaScript
Sublime Text3 直接运行js调试控制台
Sublime Text3 直接运行js调试控制台
|
6月前
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
161 0
|
1月前
|
Web App开发 前端开发 JavaScript
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
46 0
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
|
3月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
30 0
|
6月前
|
Web App开发 Android开发 开发者
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
57 0
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
|
4月前
|
Web App开发
chrome控制台小技巧
chrome控制台小技巧
57 1
|
6月前
|
Web App开发
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
63 0
|
7月前
|
Web App开发 前端开发 JavaScript
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
教会你如何高效使用Chrome调试与检测你的CSS代码
165 0
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码

热门文章

最新文章