前端開發(fā)Chrome調(diào)試的技巧有哪些-創(chuàng)新互聯(lián)

今天小編給大家分享的是前端開發(fā)Chrome調(diào)試的技巧有哪些,相信很多人都不太了解,為了讓大家更加了解前端開發(fā)Chrome調(diào)試的技巧,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。一定會(huì)有所收獲的哦。

創(chuàng)新互聯(lián)專注于屯留企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。屯留網(wǎng)站建設(shè)公司,為屯留等地區(qū)提供建站服務(wù)。全流程按需定制開發(fā),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

前端開發(fā)Chrome調(diào)試的技巧有哪些

前端開發(fā)Chrome調(diào)試的小技巧

1、呼出快捷指令面板:cmd + shift + p

在Devtools界面下,鍵入cmd + shift + p將其激活,然后開始在欄中鍵入要查找的命令或輸入?號(hào)以查看所有可用命令 .

如下圖:其中Open file,Go to line,Go to symbol對(duì)于快速打開文件和定位文件位置還是節(jié)省了不少時(shí)間.

前端開發(fā)Chrome調(diào)試的技巧有哪些

2、性能監(jiān)視器: performance monitor

前端開發(fā)Chrome調(diào)試的技巧有哪些

3、本地覆蓋:local overrides

感覺這個(gè)特性是超級(jí)棒。 使用我們自己的本地資源覆蓋網(wǎng)頁(yè)所使用的資源。 多說(shuō)無(wú)益,直接舉個(gè)例子大家就明白了。

前端開發(fā)Chrome調(diào)試的技巧有哪些大家看到了吧,我們可以把網(wǎng)絡(luò)資源直接和本地資源映射,再次刷新網(wǎng)頁(yè),取得資源文件就是本地的了。這種對(duì)js、css等文件批量修改調(diào)試特別有用。

local overrides還可以模擬Mock數(shù)據(jù),如果后端API還不OK或者不想頻繁的發(fā)布后臺(tái)API。這個(gè)功能是相當(dāng)有用,不過聽說(shuō)還不支持XHR請(qǐng)求。

4、控制臺(tái)內(nèi)置指令

私以為如果網(wǎng)頁(yè)里面如果沒有引用jquery是不是就不能使用$這樣的語(yǔ)法了,nonono

$(selector, [startNode]):?jiǎn)芜x擇器

可以選擇元素并觸發(fā)元素事件.

前端開發(fā)Chrome調(diào)試的技巧有哪些

$$(選擇器,[startNode]):全選擇器      $x(path, [startNode]):xpath選擇器

$x(path)返回與給定xpath表達(dá)式匹配的DOM元素?cái)?shù)組 .

$x('//p'):返回頁(yè)面上的所有p元素。

getEventListeners(object):獲取指定對(duì)象的綁定事件

5、Console...的多種用法

1.變量打?。?s、%o、%d、和%c

例如: const text = "文本1"

console.log(打印${text})
//結(jié)果為打印文本1

2.布爾斷言打印:console.assert()

做前端調(diào)試時(shí)很有用。

3.console.table()內(nèi)容可以以表格的形式輸出.

前端開發(fā)Chrome調(diào)試的技巧有哪些

關(guān)于前端開發(fā)Chrome調(diào)試的技巧有哪些就分享到這里了,當(dāng)然并不止以上和大家分析的辦法,不過小編可以保證其準(zhǔn)確性是絕對(duì)沒問題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值,可以學(xué)以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

網(wǎng)站名稱:前端開發(fā)Chrome調(diào)試的技巧有哪些-創(chuàng)新互聯(lián)
文章路徑:http://muchs.cn/article2/dhisoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司電子商務(wù)、品牌網(wǎng)站制作營(yíng)銷型網(wǎng)站建設(shè)、ChatGPT、微信公眾號(hào)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化