js 瀏覽器上調試方法多樣

時間 2019-11-17

原文原文鏈接

一、alert(111) 直接打印出 111javascript

二、debugger 寫在代碼要調試的地方html

三、直接在控制檯 source 裏找到要調試的代碼打斷點java

四、console 經常使用的打印方式json

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

　　執行結果app

　　console 打印還支持五種佔位符this

　　字符（%s）、整數（%d或%i）、浮點數（%f）、對象（%o）和樣式定義（%c）spa

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

　　執行結果調試

　　console.dir(element)　　將該DOM結點以DOM樹的結構進行輸出，能夠詳細查對象的方法發展等code

　　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>

　　執行結果

　　console.group 和 console.groupEnd 輸出歸類

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

　　console.assert 對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯。

　　console.count() 統計執行次數

for (var i = 6; i >= 0; i--) {
    console.count('執行次數顯示: ')
}

　　console.time() 和 console.timeEnd() 計時

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

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

　　console.timeLine 和 console.timeLineEnd 記錄一段時間軸

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

五、谷歌調試

document.body.contentEditable=true 控制檯執行便可直接編輯頁面元素

　 clear() 控制檯清理內存

發現別人比我整理的更好

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。