Chrome 開發人員工具(DevTools )，幾個簡單好用的技巧

一、快捷鍵. 1. F12 叫出開發人員工具. 2. Ctrl + Shift + C 開啟開發工具後，順便檢查元素 · 二、Console 的輸出. 上面快捷鍵是在混字數，因為就算不用 ... 小雕雕的家 跳到主文 這個要打什麼啊? 部落格全站分類：數位生活 相簿 部落格 留言 名片 歡迎轉載(註明出處)或直接轉貼網址也ok，但是請不要直接把內容摳走貼在別的地方~ Mar05Sun201712:43 Chrome開發人員工具(DevTools)，幾個簡單好用的技巧-Console篇 這篇要來紀錄學到的是 Chrome瀏覽器的開發人員工具(ChromeDevTools)的一些小技巧 這個開發工具對我來說有點強，如果會使用或是加上其他套件的話，有很多小技巧可以讓你開發更快速 但是這一篇先來了解的是console的使用，畢竟這個比較常用 之後再來使用這個工具來效能分析之類的 首先混篇數的是常用的快捷鍵(不常用的就不列了)  一、快捷鍵 1.F12叫出開發人員工具 2.Ctrl+Shift+C 開啟開發工具後，順便檢查元素 3.開啟開發工具後，按下F1可以設定開發工具 4. Ctrl+Shift+D可以切換開發工具在瀏覽器的下方或右方，等同按下下面這個 5. Ctrl+Shift+M開啟模擬裝置模式，等同你按下這個 6.Ctrl+O尋找檔名 7.Ctrl+R跟F5一樣都是重新整理頁面，但我覺得Ctrl+R會比較好按 8.Ctrl+L清除Console  9.要輸入多行Shift+Enter  基本上常用的是這些，想要知道更多可以看這裡 https://developers.google.com/web/tools/chrome-devtools/shortcuts   二、Console的輸出 上面快捷鍵是在混字數，因為就算不用快捷鍵也可以用滑鼠點到 但是在console上的操作如果很熟的話，會對開發很有幫助 首先是最常用的console.log，用來輸出文字到console  以下舉例： 1.　使用console.log直接輸出 console.log("test"); 2.使用%s輸入字串 console.log("hello%s","eason"); 3.或是使用es6的 templatestrings varname="eason"; console.log(`iam${name}`); 4.使用%c輸出時加入樣式，在第二個參數時輸入css console.log("%chelloword","font-size:22px;font-weight:bold;color:blue;"); 下面列出常用% %s是輸入字串 %i或%d整數型態 %f輸入浮點數 %oDOM節點 %OJavascript對象 %c加入樣式，樣式由第二個參數決定   5. console.warn輸出警告文字，debug時會比較顯眼 console.warn("警告"); 6.console.error輸出錯誤訊息 console.error("xx行發生錯誤"); 7.console.info顯示資訊 console.info("資訊:xxxxx"); 有了以上的.warn、.error、.info之後，不要每次輸出都用.log 了 使用這三個會讓訊息更清楚   8.使用console.assert做測試 functionadd(a,b){   returna+b; } console.assert(add(3,5)==4,"錯了"); 可以用來做單元測試之外，也可以從DOM抓來檢查 console.assert(document.querySelectorAll("img").length==6,"應該要有8張圖"); 要注意的是assert只有在錯誤時才會輸出   9.用console.clear()來清除console  10.可以用console.log來檢查DOM元素  varcontent=document.querySelector("#content"); console.log(content); 11.承上，用console.dir 來輸出該元素結構 varcontent=document.querySelector("#content"); console.dir(content);   12.利用console.group來群組結果 如果今天有一個物件陣列如下，利用forEach來輸出 varstudent=[   {     name:"小明",     age:10,     job:"工具人" },{     name:"小黃",     age:3,     job:"狗"   },{     name:"小綠",     age:9,     job:"值日生"   } ]; student.forEach(p=>{   console.log(`${p.name}是${p.job}今年:${p.age}歲`); }); 輸出後會變這樣 使用console.group的話，會讓顯示更清楚 varstudent=[   {     name:"小明",     age:10,     job:"工具人" },{     name:"小黃",     age:3,     job:"狗"   },{     name:"小綠",     age:9,     job:"值日生"   } ]; student.forEach(p=>{   console.group(`${p.name}的個人資料`);   console.log(`職業:${p.job}`);   console.log(`今年:${p.age}歲`);   console.groupEnd(); }); 輸出會變成 要注意的是，有console.group就要有console.groupEnd 如果把console.group改成console.groupCollapsed，預設就不會展開所有節點 像是這樣: 13.利用console.count利計算次數 console.count("test1"); console.count("test1"); console.count("test2"); console.count("test1"); console.count("test2"); console.count("test1"); console.count("test1"); 輸出後 14.利用console.time 來計算執行時間 例如以下設定執行3秒:  console.time("執行時間"); setTimeout(function(){   console.timeEnd("執行時間") },3000); 輸出:  要記得console.time裡的文字，必須要跟timeEnd裡的文字一致 這樣才會被視為是一組喔   15.使用console.table來將物件陣列表格化 例如以下的物件陣列: varstudent=[     {   name:"小明",   age:10,   job:"工具人" },{   name:"小黃",   age:3,   job:"狗" },{   name:"小綠",   age:9,   job:"值日生" } ]; console.table(student); 輸出:  也可以輸入第二個參數來指定要顯示的欄位 console.table(student,["name","job"]); 16.用 debugger加入中斷點，這個大家應該很常用 中斷後按F10逐行執行   三、在Console下的簡碼 1.$()相當於javascript的 document.querySelector() 例如:  2.$$()相當於javascript的 querySelectorAll() 例如: 3.$x()可以回傳指定XPath的元素 例如:    參考資料: https://developers.google.com/web/tools/chrome-devtools/shortcuts https://www.youtube.com/watch?v=xkzDaKwinA8   全站熱搜 創作者介紹 小雕 小雕雕的家 小雕發表在痞客邦留言(0)人氣() E-mail轉寄 全站分類：數位生活個人分類：Javascript此分類上一篇：Javascript基礎打底系列(三)-邏輯運算子，與短路邏輯(shortcircuitlogic)的應用 上一篇：低成本快速開箱文-過年必備瓜子剪刀，撥瓜子殼的好工具 下一篇：GoogleAnalytics網站分析學習心得(一)名詞解釋與運作方式 ▲top 留言列表 發表留言 文章分類 CSS、ResponsiveWebDesign(2) CSS(3)ResponsiveWebDesign(5) JS、JQuery、Angular、React...(4) Javascript(18)React(4)jQuery(18)AngularJS(8) Facebook(14)ASP.Net(24)AndroidAPP推薦+小知識(11)Android相關開箱文(8)Android開發(10)SQL(9)PHP(1)Bootstrap(1)UX/UI使用者經驗設計(5)網站相關工具(3)網站分析(7)想要轉型成食記(17)想要轉型成遊記(19)想轉型成命理網站(5)生活類開箱文(8)心情(29) 最新文章 熱門文章 最新留言 我的連結 技術相關 ECMAScript6入門GoogleWebFundamentalsfiddler-檢查http封包內容工具HTML5FileAPIJavaScript本質部份CleanCodeJavascript(簡中版)jQuery寫作標準+好的實踐如何做到jQuery-free？React入门教程HTTPArchive 有趣 任天堂大亂鬥分享你的塗鴉~ 生活更美好 小雕雕的心靈道場小雕雕的命理練功坊 參觀人氣 本日人氣： 累積人氣： 回到頂端 回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗