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

資訊專欄INFORMATION COLUMN

vue + webpack +chrome 調(diào)試

BWrong / 2529人閱讀

摘要：最近整理一下針對(duì)的調(diào)試方法。一是的調(diào)試的插件，可以直接顯示組件現(xiàn)在的狀態(tài)。最終的只有一份，它是對(duì)生成的進(jìn)行簡(jiǎn)化，然后再次生成的。關(guān)于的標(biāo)記是不起作用的需要手動(dòng)加入命令

問(wèn)題描述

vue 經(jīng)過(guò)webpack的打包壓縮之后，通過(guò)source看到的代碼已經(jīng)面目全非，無(wú)法輕易對(duì)代碼進(jìn)行調(diào)試。最近整理一下針對(duì)vue的調(diào)試方法。

一、 devtools

devtools是Chrome的調(diào)試vue的插件，可以直接顯示VUE組件現(xiàn)在的狀態(tài)。
安裝方法是在Chrome瀏覽器的擴(kuò)展插件倉(cāng)庫(kù)里搜vue devtool，安裝Vue.js devtools后結(jié)合下面這張官方動(dòng)圖，
139062-20180515165823688-1885930023 (1).gif
139062-20180515165823688-1885930023.gif

devtools 只能調(diào)試開(kāi)發(fā)環(huán)境的代碼，正式環(huán)境沒(méi)辦法調(diào)試
二、 使用debugger和sourcemap調(diào)試Vue組件

關(guān)于webpack的sourcemap一共有7中配置，sourcemap 是指模塊引入方式和源文件對(duì)應(yīng)關(guān)系，不同的配置會(huì)影響打包的速度，和是否能追尋到源代碼。

eval 文檔上解釋的很明白，每個(gè)模塊都封裝到 eval 包裹起來(lái)，并在后面添加 //# sourceURL

source-map 這是最原始的 source-map 實(shí)現(xiàn)方式，其實(shí)現(xiàn)是打包代碼同時(shí)創(chuàng)建一個(gè)新的 sourcemap 文件， 并在打包文件的末尾添加 //# sourceURL 注釋行告訴 JS 引擎文件在哪兒

hidden-source-map 文檔上也說(shuō)了，就是 soucremap 但沒(méi)注釋，沒(méi)注釋怎么找文件呢？貌似只能靠后綴，譬如 xxx/bundle.js 文件，某些引擎會(huì)嘗試去找 xxx/bundle.js.map

inline-source-map 為每一個(gè)文件添加 sourcemap 的 DataUrl，注意這里的文件是打包前的每一個(gè)文件而不是最后打包出來(lái)的，同時(shí)這個(gè) DataUrl 是包含一個(gè)文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一個(gè) url。

eval-source-map 這個(gè)就是把 eval 的 sourceURL 換成了完整 souremap 信息的 DataUrl

cheap-source-map 不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

cheap-module-source-map 不包含列信息，同時(shí) loader 的 sourcemap 也被簡(jiǎn)化為只包含對(duì)應(yīng)行的。最終的 sourcemap 只有一份，它是 webpack 對(duì) loader 生成的 sourcemap 進(jìn)行簡(jiǎn)化，然后再次生成的。

webpack 不僅支持這 7 種，而且它們還是可以任意組合的，就如文檔所說(shuō)，你可以設(shè)置 souremap 選項(xiàng)為 cheap-module-inline-source-map。
經(jīng)過(guò)測(cè)試只要包含source-map，都能找到debug的源文件，只有eval環(huán)境下是轉(zhuǎn)譯之后的文件。

關(guān)于debuger webstrom的debug標(biāo)記是不起作用的 需要手動(dòng)加入debuger命令
 created() {
    debugger
    this.eventBus = bus;
    console.log(this.eventBus);
 }

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

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

相關(guān)文章

  • Visual Studio Code 斷點(diǎn)調(diào)試 Vue

    摘要：個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置和來(lái)完成直接在斷點(diǎn)調(diào)試代碼并且在的調(diào)試窗口看到中相同的值。現(xiàn)在就可以在文件的代碼中打斷點(diǎn)進(jìn)行調(diào)試了。 很多人習(xí)慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼， 或者直接使用 console.log 來(lái)觀察變量值， 這是非常痛苦的一件事，需要同時(shí)打開(kāi)至少 3 個(gè)窗體。個(gè)人還是更加習(xí)慣于斷點(diǎn)調(diào)試。這篇文章將介紹如何配置 Visual S...

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

  • weex初探

    摘要：解決在文件中，多頁(yè)面配置默認(rèn)是單頁(yè)面效果，首先，真正運(yùn)行的是，通過(guò)作為入口文件文件，通過(guò)，將文件打包成進(jìn)行使用。多頁(yè)面的重點(diǎn)，就是將獨(dú)立頁(yè)面的文件，生成多個(gè)文件。的入口和出口配置參考文件，創(chuàng)建一個(gè)，作為的入口，用于生成頁(yè)面。 前言 RN weex hippy taro 1.Weex與RN 比較 showImg(https://segmentfault.com/img/bVbvfFL?w...

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

  • weex初探

    摘要：解決在文件中，多頁(yè)面配置默認(rèn)是單頁(yè)面效果，首先，真正運(yùn)行的是，通過(guò)作為入口文件文件，通過(guò)，將文件打包成進(jìn)行使用。多頁(yè)面的重點(diǎn)，就是將獨(dú)立頁(yè)面的文件，生成多個(gè)文件。的入口和出口配置參考文件，創(chuàng)建一個(gè)，作為的入口，用于生成頁(yè)面。 前言 RN weex hippy taro 1.Weex與RN 比較 showImg(https://segmentfault.com/img/bVbvfFL?w...

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

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

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

  • 一步一步創(chuàng)建vue2.0項(xiàng)目（一）

    摘要：一步一步創(chuàng)建項(xiàng)目已經(jīng)發(fā)正式版本了，來(lái)研究一下吧新建一個(gè)文件夾。文件內(nèi)容本身是一個(gè)字符串，不僅僅是一個(gè)對(duì)象。代碼如下下一步開(kāi)始創(chuàng)建文件。 一步一步創(chuàng)建vue2.0項(xiàng)目 vue2.0已經(jīng)發(fā)正式版本了，來(lái)研究一下吧 新建一個(gè)文件夾 vue2.0-learn 。_前提是默認(rèn)已經(jīng)安裝了nodejs和npm_ npm init 按照步驟初始化package.json，這個(gè)文件提供了這個(gè)項(xiàng)目需要...

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

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

0條評(píng)論

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