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

資訊專欄INFORMATION COLUMN

五種前端開發(fā)必備的調(diào)試技術(shù)

張紅新 / 2919人閱讀

摘要：在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。移動調(diào)試斷點斷點方法遠程映射本地調(diào)試在移動上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了。

在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。

Weinre移動調(diào)試

DOM 斷點

debugger斷點

native方法hook

遠程映射本地調(diào)試


Weinre

在移動上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了weinre。安裝weinre可以實現(xiàn)pc來調(diào)試手機頁面，所以對于移動開發(fā)調(diào)試是很重要的哦~

安裝weinre

weinre可以通過npm來安裝：

npm install -g weinre

安裝完之后，可執(zhí)行下面的命令來啟動：

weinre --httpPort 8080 --boundHost -all-

這樣訪問自己的127.0.0.1:8080按照提示在需要調(diào)試頁面中插入一段js，然后就可以調(diào)試了。操作界面類似Chrome的DevTools，具體操作可以看下[教程](>

原理

通過在需要調(diào)試的頁面中引入一段weinre的js，實現(xiàn)pc和手機的socket通信，從而實現(xiàn)實時調(diào)試。

Tips

如果你嫌每次都要在調(diào)試的頁面引入js麻煩，可以做個書簽或者chrome插件

如果嫌安裝麻煩，可以使用phonegap的weinre：http://debug.phonegap.com/


DOM斷點

DOM斷點是一個Firebug和chrome DevTools提供的功能，當js需要操作打了斷點的DOM時，會自動暫停，類似debugger調(diào)試。

使用DOM斷點

選擇你要打斷點的DOM節(jié)點

右鍵選擇Break on..

選擇斷點類型

Tips

Firebug中，DOM斷點可以在Script> Breakpoints里面看到

chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到


javascript的debugger語句

需要調(diào)試js的時候，我們可以給需要調(diào)試的地方通過debugger打斷點，代碼執(zhí)行到斷點就會暫停，這時候通過單步調(diào)試等方式就可以調(diào)試js代碼

使用javascript的斷點

在需要打斷點的地方添加debugger：

if (waldo) {
  debugger;
}

這時候打開console面板，就可以調(diào)試了

Tips

如果你不知道怎么調(diào)試，那么盡快看下：Chrome DevTools中斷點部分的教程


原生代碼的hook調(diào)試

因為瀏覽器自己會內(nèi)置一些類似window對象這些原生的js方法，當你知道原生代碼的確有問題，但是你又不能跟蹤調(diào)試的時候，你就可以用這個方法了。

舉個例子

例如我們注意到了一個DOM的屬性值發(fā)生了變化，但是我們不知道是哪里的代碼導(dǎo)致的變化，所以我們可以給DOM元素的setAttribute打個斷點，代碼如下：

var oldFn = Element.prototype.setAttribute;

Element.prototype.setAttribute = function (attr, value) {
    if (value === "the_droids_you_are_looking_for") {
        debugger;
    }
    oldFn.call(this, attr, value);
}

這樣，當元素的屬性發(fā)生了變化的時候，就會執(zhí)行到斷點，你就可以在斷點的棧中找出調(diào)用的地方來~

Tips

這種方法不保證在所有瀏覽器中有效，比如ios的safari隱私模式下，我們就不可以修改localStorage方法


遠程映射本地調(diào)試

當線上某個js/css出現(xiàn)問題，我們可以用代理的方式，將遠程的文件代理到本地來實現(xiàn)遠程映射調(diào)試。其實除了這個功能，還可以作為抓包工具，這在移動端是很重要的。推薦Mac用[charles Proxy](http://www.charlesproxy.com/），
windows用戶使用fiddle。

這個就不多說了，直接上國內(nèi)的幾篇文章：

http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html

http://www.cnblogs.com/TankXiao/p/3063871.html


via js8.in

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

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

相關(guān)文章

  • Java - 收藏集 - 掘金

    摘要：強大的表單驗證前端掘金支持非常強大的內(nèi)置表單驗證，以及。面向?qū)ο蠛兔嫦蜻^程的區(qū)別的種設(shè)計模式全解析后端掘金一設(shè)計模式的分類總體來說設(shè)計模式分為三大類創(chuàng)建型模式，共五種工廠方法模式抽象工廠模式單例模式建造者模式原型模式。 強大的 Angular 表單驗證 - 前端 - 掘金Angular 支持非常強大的內(nèi)置表單驗證，maxlength、minlength、required 以及 patt...

    XiNGRZ 評論0 收藏0

  • 前端優(yōu)化 - 收藏集 - 掘金

    摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應(yīng)用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

    VincentFF 評論0 收藏0

  • 前端開發(fā)必備調(diào)試技巧

    摘要：定義使用向控制臺輸出信息，產(chǎn)生文件和啟動調(diào)試會話用途，用于調(diào)試，查看錯誤等。在上反鍵可以選擇可以重新執(zhí)行該函數(shù)，配合變量修改和編輯代碼等功能，可以在當前中反復(fù)進行調(diào)試。 Chrome調(diào)試工具的使用 常用的面板 Elements(元素面板) Console(控制臺面板) Sources(資源面板) NetWork(網(wǎng)絡(luò)面板) 1. Elements panel 定義：通過Elemen...

    Heier 評論0 收藏0

  • 前端開發(fā)必備調(diào)試技巧

    摘要：定義使用向控制臺輸出信息，產(chǎn)生文件和啟動調(diào)試會話用途，用于調(diào)試，查看錯誤等。在上反鍵可以選擇可以重新執(zhí)行該函數(shù)，配合變量修改和編輯代碼等功能，可以在當前中反復(fù)進行調(diào)試。 Chrome調(diào)試工具的使用 常用的面板 Elements(元素面板) Console(控制臺面板) Sources(資源面板) NetWork(網(wǎng)絡(luò)面板) 1. Elements panel 定義：通過Elemen...

    binaryTree 評論0 收藏0

  • 前端開發(fā)必備調(diào)試技巧

    摘要：定義使用向控制臺輸出信息，產(chǎn)生文件和啟動調(diào)試會話用途，用于調(diào)試，查看錯誤等。在上反鍵可以選擇可以重新執(zhí)行該函數(shù)，配合變量修改和編輯代碼等功能，可以在當前中反復(fù)進行調(diào)試。 Chrome調(diào)試工具的使用 常用的面板 Elements(元素面板) Console(控制臺面板) Sources(資源面板) NetWork(網(wǎng)絡(luò)面板) 1. Elements panel 定義：通過Elemen...

    zhou_you 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<