vue + webpack +chrome 調試

BWrong 發布于2019-08-23 12:49 / 2458人閱讀

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

問題描述

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

一、 devtools

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

devtools 只能調試開發環境的代碼，正式環境沒辦法調試

二、使用debugger和sourcemap調試Vue組件

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

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

source-map 這是最原始的 source-map 實現方式，其實現是打包代碼同時創建一個新的 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 也被簡化為只包含對應行的。最終的 sourcemap 只有一份，它是 webpack 對 loader 生成的 sourcemap 進行簡化，然后再次生成的。

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

關于debuger webstrom的debug標記是不起作用的 需要手動加入debuger命令

 created() {
    debugger
    this.eventBus = bus;
    console.log(this.eventBus);
 }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99031.html

Visual Studio Code 斷點調試 Vue

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

qpwoeiru96 2019-08-22 14:51 評論0 收藏0
weex初探

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

Cruise_Chan 2019-08-02 15:33 評論0 收藏0
weex初探

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

biaoxiaoduan 2019-08-26 10:11 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

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

princekin 2019-08-20 11:28 評論0 收藏0
一步一步創建vue2.0項目（一）

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

ranwu 2019-08-20 15:58 評論0 收藏0