亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

BWrong / 2517人閱讀

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

問題描述

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

一、 devtools

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

    qpwoeiru96 評論0 收藏0

  • weex初探

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

    Cruise_Chan 評論0 收藏0

  • weex初探

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

    biaoxiaoduan 評論0 收藏0

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

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

    princekin 評論0 收藏0

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

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

    ranwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<