Chrome調(diào)試技巧

v1 發(fā)布于2019-04-23 13:35 / 1531人閱讀

摘要：三如何在線映射到本進(jìn)行調(diào)試在這種情況下，我們大多數(shù)時(shí)間是使用這類抓包工具進(jìn)行路徑的映射，或者是修改文件進(jìn)行域名的跳轉(zhuǎn)。

一、如何查看dom元素的事件

某種情況我們在頁面交互上發(fā)現(xiàn)一個(gè)問題，肯定是非常想知道這個(gè)交互觸發(fā)執(zhí)行的入口，這會(huì)使我們更直接、快速的進(jìn)行代碼的跟蹤、調(diào)試和分析。其實(shí)在chrome瀏覽器這很簡單就實(shí)現(xiàn)了，如下百度一下按鈕監(jiān)聽的事件列表：

如圖，我們就可以很清楚的看出百度一下這個(gè)按鈕會(huì)觸發(fā)多少的事件。

二、如何查看Javascipt的調(diào)用堆棧信息

此方法讓你很快的找到ajax請(qǐng)求的調(diào)用堆棧，也就是ajax是在什么方法里面請(qǐng)求的。他的父級(jí)調(diào)用者又是誰：

如上圖，我們鼠標(biāo)懸停在network面板的請(qǐng)求上的Initiator列，就可以看到調(diào)用堆棧信息了。你還可單擊某個(gè)位置進(jìn)行代碼的查看，這是不是很方便啊。

三、如何在線js映射到本進(jìn)行調(diào)試

在這種情況下，我們大多數(shù)時(shí)間是使用Fiddler這類抓包工具進(jìn)行路徑的映射，或者是修改host文件進(jìn)行域名的跳轉(zhuǎn)。這次我向大家介紹一款chrome的插件，方便且功能強(qiáng)大。
插件名為：ReRes 點(diǎn)擊下載

3.1 安裝和測試

ReRes的安裝

單擊上面的下載地址獲取插件的壓縮包，然后解壓。直接安裝為chrome的插件

一定要開啟允許訪問文件網(wǎng)址

ReRes添加規(guī)則

可以chrome的插件區(qū)域上單擊ReRes圖標(biāo)，添加規(guī)則

編輯http與file的對(duì)應(yīng)關(guān)系，注意，一般情況下線上js都有版本的后綴，所以用最近加一個(gè)*來表示匹配，然后我們訪問constinfo.js，就會(huì)跳轉(zhuǎn)映射到本地的constinfo.js(這是不是很方便了)

GPU云服務(wù)器云服務(wù)器調(diào)試技巧 chrome webrtc調(diào)試 chrome webrtc 調(diào)試 javascript調(diào)試技巧

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

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

相關(guān)文章

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

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

warnerwu 2019-08-19 14:38 評(píng)論0 收藏0
Chrome 調(diào)試技巧

摘要：前言除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。而在調(diào)試中我們可以使用是與來作為選擇器，省去大串代碼，如下。測試用時(shí)測試用時(shí)關(guān)閉界面前言：除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在Chrome中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。 Sources頁 command + p 文件跳轉(zhuǎn) 使用Sublime的人或習(xí)慣用command +...

codeGoogle 2019-08-21 10:45 評(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è)庫或框架。譯者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率來調(diào)試JavaScript 熟悉工具可以讓工具...

CODING 2019-08-21 17:27 評(píng)論0 收藏0
Chrome 調(diào)試技巧

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

luqiuwen 2019-08-02 16:03 評(píng)論0 收藏0
Chrome 調(diào)試技巧

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

fantix 2019-08-29 16:38 評(píng)論0 收藏0