怎樣用Vue Devtools調上線的頁面

Production 打包輸出的Vue項目怎樣使用Vue Devtools了?

第一步：

咱們用掘金的頁面走一波，首先獲得Vue類，通常來講Vue的源碼都被打包到了vendor.xxx.js文件中。咱們能夠這樣獲得Vue類。

• 咱們打開chrome 開發者工具，找到這個文件，而後搜索prototype.$nextTick，
• 在搜索的代碼上打上斷點，而後刷新頁面
• 在控制檯中保存Vue 類

看圖：

第二步：

• 在console中執行代碼vv.config.devtools=true;__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', vv);
• 關閉console 而後從新打開，咱們能夠看見在chrome 的devtool 多了一個Vue Tab
• 這個時候就能夠使用Vue Devtools了，若是看見的是一片空白，請繼續走下面的步驟

第三步：

• 找到Vue掛載的Dom根節點，通常都是app節點
• 在Vue Devtools的backend.js中找到t.childNodes這一行代碼，打斷點
• 在Vue Devtools調試面板中點擊刷新按鈕
• pause在斷點處，而後在控制檯中執行t=app;
• 放開斷點，讓代碼繼續執行，好了如今你能夠在Vue Devtools裏面看到組件了

看圖：

總結：

這個流程有一點複雜，通常沒有什麼用，可是若是你的項目在正式服務中有BUG，或者某些服務本地開發沒法模擬，礙於特殊的數據環境，又苦於production的Vue項目不能使用調試，你能夠用這個方法來快速的定位問題，Have a fun time!