成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Chrome 調(diào)試技巧

codeGoogle / 2838人閱讀

摘要：前言除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在中，其含有一些有意思的方法，有助于提高我們的開(kāi)發(fā)調(diào)試效率。而在調(diào)試中我們可以使用是與來(lái)作為選擇器，省去大串代碼，如下。測(cè)試用時(shí)測(cè)試用時(shí)關(guān)閉界面

前言：
除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在Chrome中，其含有一些有意思的方法，有助于提高我們的開(kāi)發(fā)調(diào)試效率。

Sources頁(yè) command + p 文件跳轉(zhuǎn)

使用Sublime的人或習(xí)慣用command + p 進(jìn)行文件的跳轉(zhuǎn)，在chrome dev tools中其實(shí)也有類(lèi)似的跳轉(zhuǎn)方法。

command + p  
 
command + p + 文件名 + : + 數(shù)字

command + shift + o 任意方法跳轉(zhuǎn)

Sublime中使用command +R 進(jìn)行方法跳轉(zhuǎn)，而在dev tools中，可以使用command + shift + o 進(jìn)行任意方法的跳轉(zhuǎn)。

command + shift + o  // 跳轉(zhuǎn)到任意方法

注： 查找某文件中的方法，使用command + p 和 command + shift + o 更配哦~

Elements頁(yè)

使用方向鍵快，上下鍵導(dǎo)航，左右鍵收起展開(kāi)；

H鍵快速隱藏dom（效果相當(dāng)于給DOM加入visibility:hidden屬性，有別于display:none）

Enter進(jìn)行快速編輯屬性；

鼠標(biāo)右擊使用各類(lèi)方法…

Console頁(yè) $_ 表示上次的計(jì)算結(jié)果

舉個(gè)栗子

15 * 15  
$_ * 10

$0 獲取當(dāng)前選中的DOM

選中DOM之后，在控制臺(tái)輸入$0。

$0

注：$1 $2 $3 是獲取前幾次選的dom，不常用

$(selector) 與 $$(selector) 獲取當(dāng)前選中的DOM

當(dāng)頁(yè)面沒(méi)有引入jQuery等類(lèi)庫(kù)的時(shí)候，這是我們一般會(huì)用
document.querySelector() 或是 document.querySelectorAll() 來(lái)作用dom選擇器。
而在Chrome調(diào)試中我們可以使用是$(selector) 與 $$(selector)來(lái)作為選擇器，省去大串代碼，如下。

$("body")
 
$$("body")

由上圖實(shí)際結(jié)果看出，$()和$$()獲取得到的都是滿(mǎn)足選中條件元素的一個(gè)集合，相當(dāng)于document.querySelectorAll()
注: 實(shí)驗(yàn)所用chrome版本：40.0.2214.111 (64-bit)

copy(Object) 拷貝對(duì)象 
copy(document.body)
 
copy($0)

注: 可搭配$0來(lái)拷貝當(dāng)前選擇的dom，記得手動(dòng)黏貼~

console.time & console.timeEnd 計(jì)算耗時(shí)

對(duì)代碼執(zhí)行的耗時(shí)情況進(jìn)行測(cè)試時(shí)，處理手工在代碼中創(chuàng)建前后兩個(gè)時(shí)間戳進(jìn)行對(duì)比，在dev tools中，我們可以使用console.time與 console.timeEnd實(shí)現(xiàn)。

console.time("測(cè)試用時(shí)");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("測(cè)試用時(shí)");

關(guān)閉Console界面

ESC…

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86119.html

相關(guān)文章

  • 你不知道的Chrome DevTools（2）：那些debug的技巧

    摘要：我打算把一些上使用的高級(jí)技巧寫(xiě)成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴(yán)重的，因?yàn)榈恼Z(yǔ)法比較寬松和隨意，所以同一功能多種寫(xiě)法，各種奇葩都有?？偨Y(jié)前端在調(diào)試代碼的時(shí)候，知道開(kāi)發(fā)工具上的小技巧，可以提高查找問(wèn)題的效率。 Web前端開(kāi)發(fā)過(guò)程中必然會(huì)用到Chrome瀏覽器自帶的開(kāi)發(fā)者工具Chrome DevTools，使用它作為Web前端開(kāi)發(fā)性能調(diào)試的必備工具。就連隔...

    warnerwu 評(píng)論0 收藏0

  • [譯]14個(gè)你可能不知道的JavaScript調(diào)試技巧

    摘要：在控制臺(tái)中使用，當(dāng)?shù)竭_(dá)傳入的函數(shù)時(shí)，代碼將停止。但除了私有和匿名函數(shù)這可能是找到調(diào)試函數(shù)的最快方法。在控制臺(tái)中輸入，當(dāng)調(diào)用時(shí)，將以調(diào)試模式停止屏蔽不相關(guān)代碼現(xiàn)在，我們經(jīng)常在應(yīng)用中引入幾個(gè)庫(kù)或框架。 譯者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率來(lái)調(diào)試JavaScript 熟悉工具可以讓工具...

    CODING 評(píng)論0 收藏0

  • Chrome調(diào)試技巧

    摘要：三如何在線(xiàn)映射到本進(jìn)行調(diào)試在這種情況下，我們大多數(shù)時(shí)間是使用這類(lèi)抓包工具進(jìn)行路徑的映射，或者是修改文件進(jìn)行域名的跳轉(zhuǎn)。一、如何查看dom元素的事件 某種情況我們?cè)陧?yè)面交互上發(fā)現(xiàn)一個(gè)問(wèn)題，肯定是非常想知道這個(gè)交互觸發(fā)執(zhí)行的入口，這會(huì)使我們更直接、快速的進(jìn)行代碼的跟蹤、調(diào)試和分析。其實(shí)在chrome瀏覽器這很簡(jiǎn)單就實(shí)現(xiàn)了，如下 百度一下 按鈕 監(jiān)聽(tīng)的事件列表：如圖，我們就可以很清楚的看出 百度一...

    v1 評(píng)論0 收藏0

  • Chrome 調(diào)試技巧

    摘要：而就是告訴程序在那里停下來(lái)進(jìn)行單步調(diào)試，俗稱(chēng)斷點(diǎn)。面向，專(zhuān)為異步而生的斷點(diǎn)調(diào)試功能。中的調(diào)試技巧元素的控制臺(tái)書(shū)簽開(kāi)發(fā)者工具和都提供了書(shū)簽功能，用于顯示你在元素標(biāo)簽頁(yè)或標(biāo)簽頁(yè)中最后點(diǎn)擊的元素。 寫(xiě)在前面本文包括瀏覽器調(diào)試，不包括web移動(dòng)端調(diào)試。本文調(diào)試均在chrome瀏覽器進(jìn)行 alert 這個(gè)不用多說(shuō)了，不言自明 console 基本輸出 想必大家都在用console.log在控制...

    luqiuwen 評(píng)論0 收藏0

  • Chrome 調(diào)試技巧

    摘要：而就是告訴程序在那里停下來(lái)進(jìn)行單步調(diào)試，俗稱(chēng)斷點(diǎn)。面向，專(zhuān)為異步而生的斷點(diǎn)調(diào)試功能。中的調(diào)試技巧元素的控制臺(tái)書(shū)簽開(kāi)發(fā)者工具和都提供了書(shū)簽功能，用于顯示你在元素標(biāo)簽頁(yè)或標(biāo)簽頁(yè)中最后點(diǎn)擊的元素。 寫(xiě)在前面本文包括瀏覽器調(diào)試，不包括web移動(dòng)端調(diào)試。本文調(diào)試均在chrome瀏覽器進(jìn)行 alert 這個(gè)不用多說(shuō)了，不言自明 console 基本輸出 想必大家都在用console.log在控制...

    fantix 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<