js 浏览器上调试方法多样

1、alert(111) 直接打印出 111

2、debugger 写在代码要调试的地方

3、直接在控制台 source 里找到要调试的代码打断点

js 浏览器上调试方法多样

4、console 常用的打印方式

 console.log(23333)
 console.warn(23333)
 console.info(23333)
 console.debug(23333)
 console.error(23333)

　　执行结果

　　 js 浏览器上调试方法多样

　　console 打印还支持五种占位符

　　字符（%s）、整数（%d或%i）、浮点数（%f）、对象（%o）和样式定义（%c）

var json = {
    name:'cindy'
}
console.log('公元 %s 年', '23333')
console.log('公元 %d 年', 23333)
console.log('浮点数 %f ', 23.99)
console.log('object对象 %o', json)

　console.log("%c Hello World","font-size:20px;color:green");
console.log("%cthis is%cmy sister","color:green","font-weight:bold;color:red;font-size:20px;");

　　执行结果

　　 js 浏览器上调试方法多样

　　console.dir(element)　　将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等

　　console.dirxml(element) 输出 DOM 节点代码

<body>
    <div class="box">
        <p>let's show time</p>
        <span>what you mean?</span>
        <ul>
            <li>apple</li>
        </ul>
    </div>
    <script type="text/javascript">
        var elem = document.querySelector('.box')
        console.dirxml(elem)
　　　　  console.dir(elem)    </script>
</body>

　　执行结果

　　 js 浏览器上调试方法多样

　　console.group 和 console.groupEnd 输出归类

console.group('begin')
console.log('内部包含项目')
console.info(23333)
console.groupEnd('end')
console.log('others')

　　 js 浏览器上调试方法多样

　　console.assert 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

　　 js 浏览器上调试方法多样

　　console.count() 统计执行次数

for (var i = 6; i >= 0; i--) {
    console.count('执行次数显示: ')
}

　　 js 浏览器上调试方法多样

　　　console.time() 和 console.timeEnd() 计时

console.time('timer')
for (var i = 50000; i >= 0; i--) {
}
console.timeEnd('timer')

　　 js 浏览器上调试方法多样

　　console.profile 和 console.profileEnd 查看 cpu 相关信息　　　　

　　console.timeLine 和 console.timeLineEnd 记录一段时间轴

console.profile('cpu')
for (var i = 50000; i >= 0; i--) {
}
console.profileEnd('cpu')

js 浏览器上调试方法多样

5、谷歌调试

document.body.contentEditable=true 控制台执行即可直接编辑页面元素

　 clear() 控制台清理内存

发现别人比我整理的更好

http://www.cnblogs.com/liyunhua/p/4529079.html#_label17

秒客网

js 浏览器上调试方法多样

相关文章