1.console.log()
除錯時console.log是最常用的命令之一，此外還有一些其他的使用的功能，
console.log()中，可是使用占位符對資訊加工輸出
console.log(' %c %s %s %s', 'color: yellow; background-color: black;', '–', '測驗資訊', '–');
也可以簡單一點 也可以列印出來圖片哈 在占位符%c中設定背景圖片 但是使用padding和line-height需要多調整這里就不演示了（沒有想到使用場景0.0）
console.log(`%c本地測驗 %c Hello World %c`,'color:#fff;font-size:10px;background:#35495e;padding:5px;border-radius:3px 0 0 3px','color:#fff;padding:5px;font-size:10px;background:#41b883;border-radius:0 3px 3px 0','background:transparent');
2.console.table()
你可能會有一堆物件需要查看，可以用console.log把每一個物件都輸出出來，也可以用console.table陳述句直接把所有的物件都直接輸出成為一個表格
3.console.time()和console.timeEnd()
當想知道某些代碼的執行時間的時候這個工具將會非常有用，特別是當你定位很耗時的回圈的時候，
5.截屏
在新版本的Chrome中，提供了一個截圖的API，你可以將整個頁面截圖或者截取部分頁面元素，且截取的圖片尺寸跟瀏覽器當前視圖中要截取的內容所占尺寸一致，截圖輸出的是png格式的圖片，會自動通過瀏覽器下載到默認的目錄下，現在有三種截取的方式：截取整個頁面、部分元素 或 當前視圖，
- CMD + SHIFT + P(windows中用CTRL + SHIFT + P) 打開命令選單
- 在Elements標簽頁，選中要截取的頁面元素
- 選擇Capture node screenshot（或者Capture full size screenshot或者Capture screenshot）
6.debugger
只要在代碼中添加debugger，chrome在運行的時候會自動停在那里，還可以用條件陳述句把它包裹起來，這樣就可以在需要的時候才執行它，
if (thisThing) {
debugger;轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547537.html
標籤：其他
上一篇：Three.js 進階之旅：物理效果-3D乒乓球小游戲 🏓
下一篇：前端設計模式——過濾器模式