有時(shí)DOM像有了自己的想法。當(dāng)不可思議的變化發(fā)生時(shí)很難找到問題的根源。
Chrome開發(fā)人員工有調(diào)試這個(gè)問題的超級(jí)有用技能。這就是所謂的“Break on…”，你可以通過在元素選項(xiàng)卡上右鍵DOM節(jié)點(diǎn)找到它。

斷點(diǎn)可以在節(jié)點(diǎn)被刪除后設(shè)置，當(dāng)節(jié)點(diǎn)的屬性更改或者其子樹中的節(jié)點(diǎn)變化時(shí)。

3. Ajax斷點(diǎn)

XHR斷點(diǎn)或我稱作的Ajax斷點(diǎn)，也允許當(dāng)一個(gè)預(yù)期Ajax請(qǐng)求創(chuàng)建時(shí)斷開。
當(dāng)調(diào)試你的web應(yīng)用的網(wǎng)絡(luò)時(shí)這是個(gè)讓人吃驚的工具。

4. 模擬不同的移動(dòng)設(shè)備

Chrome增加了內(nèi)置的移動(dòng)設(shè)備模擬工具，這將簡化你的日常工作。
選擇任何非Console的選項(xiàng)卡找到它們，按鍵盤上的esc鍵并選擇你想摸你的移動(dòng)設(shè)備。

你當(dāng)然不會(huì)得到一個(gè)真正的iPhone，但尺寸、觸摸事件和agemt都會(huì)為你效仿。

5. 通過審核提升你的站點(diǎn)

YSlow是個(gè)偉大的工具。Chrome也在開發(fā)人員工具下包含一個(gè)稱作Audits的類似工具。
使用快速審核一下你的網(wǎng)站，來獲得有用實(shí)際的優(yōu)化技巧。

還有什么呢?

沒有這些工具我不能想象如何開發(fā)。當(dāng)我發(fā)現(xiàn)新的后我會(huì)發(fā)布更多，敬請(qǐng)期待。

您可能感興趣的文章:

相關(guān)文章

詳解如何編寫一個(gè)Typescript的類型聲明文件
我們知道TypeScript根據(jù)類型聲明進(jìn)行類型檢查，但有些情況可能沒有類型聲明，這個(gè)時(shí)候就需要我們自己寫一個(gè)，下面小編就來和大家聊聊如果寫一個(gè)Typescript的類型聲明文件呢
2023-06-06
JS批量修改PS中圖層名稱的方法
批量修改PS中圖層名稱的方法有很多，在本文為大家介紹下使用js是如何實(shí)現(xiàn)的
2014-01-01
基于Echart實(shí)現(xiàn)折線圖的繪制詳解
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)，基于html5?Canvas，是一個(gè)純Javascript圖表庫，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實(shí)現(xiàn)折線圖的繪制，感興趣的可以學(xué)習(xí)一下
2022-03-03
JavaScript中break、continue和return的用法區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript中break、continue和return的用法區(qū)別,結(jié)合實(shí)例形式詳細(xì)對(duì)比分析了JavaScript中break、continue和return的基本功能、使用方法、區(qū)別與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
JavaScript之class繼承_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之class繼承，新的關(guān)鍵字class從ES6開始正式被引入到JavaScript中。class的目的就是讓定義類更簡單，有興趣的可以了解一下
2017-07-07
JavaScript中isPrototypeOf函數(shù)作用和使用實(shí)例
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)作用和使用實(shí)例,本文講解了它的作用和使用方法以及使用實(shí)例,需要的朋友可以參考下
2015-06-06
KnockoutJS 3.X API 第四章之事件event綁定
event綁定即為事件綁定，即當(dāng)觸發(fā)相關(guān)DOM事件的時(shí)候回調(diào)函數(shù),這篇文章主要介紹了KnockoutJS 3.X API 第四章之事件event綁定的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2016-10-10
JS/jQuery判斷DOM節(jié)點(diǎn)是否存在的簡單方法
下面性價(jià)比就為大家?guī)硪黄狫S/jQuery判斷DOM節(jié)點(diǎn)是否存在的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起小編過來看看吧
2016-11-11
JavaScript中連接操作Oracle數(shù)據(jù)庫實(shí)例
這篇文章主要介紹了JavaScript中連接操作Oracle數(shù)據(jù)庫實(shí)例,本文講解了運(yùn)行環(huán)境、代碼實(shí)例、運(yùn)行結(jié)果等一系列完整步驟,需要的朋友可以參考下
2015-04-04
nodejs實(shí)用示例縮址還原
nodejs最近好紅火，我也趁寒冷天氣在nodejs的火爐邊取暖一下?？s址還原實(shí)現(xiàn)代碼。
2010-12-12