資訊專欄INFORMATION COLUMN
摘要：前言除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。而在調(diào)試中我們可以使用是與來作為選擇器，省去大串代碼，如下。測試用時測試用時關(guān)閉界面
前言：
除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在Chrome中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。
使用Sublime的人或習(xí)慣用command + p 進行文件的跳轉(zhuǎn)，在chrome dev tools中其實也有類似的跳轉(zhuǎn)方法。
command + p command + p + 文件名 + : + 數(shù)字command + shift + o 任意方法跳轉(zhuǎn)
Sublime中使用command +R 進行方法跳轉(zhuǎn)，而在dev tools中，可以使用command + shift + o 進行任意方法的跳轉(zhuǎn)。
command + shift + o // 跳轉(zhuǎn)到任意方法
注： 查找某文件中的方法，使用command + p 和 command + shift + o 更配哦~
Elements頁使用方向鍵快，上下鍵導(dǎo)航，左右鍵收起展開；
H鍵快速隱藏dom（效果相當(dāng)于給DOM加入visibility:hidden屬性，有別于display:none）
Enter進行快速編輯屬性；
鼠標(biāo)右擊使用各類方法…
Console頁 $_ 表示上次的計算結(jié)果舉個栗子
15 * 15 $_ * 10$0 獲取當(dāng)前選中的DOM
選中DOM之后，在控制臺輸入$0。
$0
注：$1 $2 $3 是獲取前幾次選的dom，不常用
$(selector) 與 $$(selector) 獲取當(dāng)前選中的DOM當(dāng)頁面沒有引入jQuery等類庫的時候，這是我們一般會用
document.querySelector() 或是 document.querySelectorAll() 來作用dom選擇器。
而在Chrome調(diào)試中我們可以使用是$(selector) 與 $$(selector)來作為選擇器，省去大串代碼，如下。
$("body")
$$("body")
由上圖實際結(jié)果看出，$()和$$()獲取得到的都是滿足選中條件元素的一個集合，相當(dāng)于document.querySelectorAll()
注: 實驗所用chrome版本：40.0.2214.111 (64-bit)
copy(document.body) copy($0)
注: 可搭配$0來拷貝當(dāng)前選擇的dom，記得手動黏貼~
console.time & console.timeEnd 計算耗時對代碼執(zhí)行的耗時情況進行測試時，處理手工在代碼中創(chuàng)建前后兩個時間戳進行對比，在dev tools中，我們可以使用console.time與 console.timeEnd實現(xiàn)。
console.time("測試用時");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("測試用時");
關(guān)閉Console界面
ESC…
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86119.html
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有?？偨Y(jié)前端在調(diào)試代碼的時候，知道開發(fā)工具上的小技巧，可以提高查找問題的效率。 Web前端開發(fā)過程中必然會用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔...
摘要：在控制臺中使用，當(dāng)?shù)竭_傳入的函數(shù)時，代碼將停止。但除了私有和匿名函數(shù)這可能是找到調(diào)試函數(shù)的最快方法。在控制臺中輸入，當(dāng)調(diào)用時，將以調(diào)試模式停止屏蔽不相關(guān)代碼現(xiàn)在，我們經(jīng)常在應(yīng)用中引入幾個庫或框架。 譯者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率來調(diào)試JavaScript 熟悉工具可以讓工具...
摘要：三如何在線映射到本進行調(diào)試在這種情況下，我們大多數(shù)時間是使用這類抓包工具進行路徑的映射，或者是修改文件進行域名的跳轉(zhuǎn)。一、如何查看dom元素的事件 某種情況我們在頁面交互上發(fā)現(xiàn)一個問題，肯定是非常想知道這個交互觸發(fā)執(zhí)行的入口，這會使我們更直接、快速的進行代碼的跟蹤、調(diào)試和分析。其實在chrome瀏覽器這很簡單就實現(xiàn)了，如下 百度一下 按鈕 監(jiān)聽的事件列表：如圖，我們就可以很清楚的看出 百度一...
摘要：而就是告訴程序在那里停下來進行單步調(diào)試，俗稱斷點。面向，專為異步而生的斷點調(diào)試功能。中的調(diào)試技巧元素的控制臺書簽開發(fā)者工具和都提供了書簽功能，用于顯示你在元素標(biāo)簽頁或標(biāo)簽頁中最后點擊的元素。 寫在前面本文包括瀏覽器調(diào)試，不包括web移動端調(diào)試。本文調(diào)試均在chrome瀏覽器進行 alert 這個不用多說了，不言自明 console 基本輸出 想必大家都在用console.log在控制...
摘要：而就是告訴程序在那里停下來進行單步調(diào)試，俗稱斷點。面向，專為異步而生的斷點調(diào)試功能。中的調(diào)試技巧元素的控制臺書簽開發(fā)者工具和都提供了書簽功能，用于顯示你在元素標(biāo)簽頁或標(biāo)簽頁中最后點擊的元素。 寫在前面本文包括瀏覽器調(diào)試，不包括web移動端調(diào)試。本文調(diào)試均在chrome瀏覽器進行 alert 這個不用多說了，不言自明 console 基本輸出 想必大家都在用console.log在控制...
閱讀 2388·2021-11-24 09:38
閱讀 3489·2021-11-22 14:44
閱讀 1221·2021-07-29 13:48
閱讀 2686·2019-08-29 13:20
閱讀 1181·2019-08-29 11:08
閱讀 2156·2019-08-26 10:58
閱讀 1327·2019-08-26 10:55
閱讀 3219·2019-08-26 10:39
