安裝Vue Devtools外掛成功後使用提示Vue.js not detected
問題:
裝完Vue Devtools,想用來檢視用vue.js寫的頁面,然而卻發現圖示灰色,無法使用,提示檢測不到Vue.js。
What??? 我如果沒使用Vue.js頁面怎麼可能顯示出資料??
然後另一邊我正在寫部落格,在Markdown編輯頁面上,它就給我亮了起來。
果然一看,這不又能好好用了嗎阿喂,外掛好用著呢!
解決?:
爬了很多文,最後通過修改外掛目錄下manifest.json後成功使用。
路徑我就直接通過這個外掛的ID,一長串直接電腦上搜索到的它的安裝路徑。
其實一般就在\AppData\Local\Google\Chrome\User Data\Default\Extensions\
然後把false改成true,儲存後確實可以使用外掛了。
以往問題解決我就洗洗睡了,但這次我打算做個好奇BB,Why?
為什麼改成true就好用了?沒改前不是也能使用嗎,只是我自己的頁面不能用,別的我也沒去驗證過。
於是我又去爬文,看看這個設定到底是何作用。
後續:
又爬了些文,推薦這位博主:
http://www.cnblogs.com/ligerleng/p/gmail_assist_1.html
關於這個persistent
引數,博主這麼說道:
persistent為true
時,在background欄位中指出的js指令碼將持續執行
false
,則這些指令碼將只在事件活動時執行,事件不活動時就會釋放其佔有的記憶體等資源。
他的這篇文章更好地講述了Chrome擴充套件中指令碼的執行機制和通訊方式:
http://www.cnblogs.com/ligerleng/p/gmail_assist_2.html
其中有段關於backgroud的生存週期中也提到。
更多可以去看這位博主的文。
結論:
考慮到個人的使用率和使用場景,我又去把persistent改為了false。
其實原本我的一個很簡單的頁面為何不能使用Vue Devtools,是因為我當時是在開啟這個頁面後裝的外掛,我的頁面根本就不在它的生存週期中。而我現在正在寫博文的頁面,也因為長時間沒有“活動”,圖示現在已經變灰色了,重新整理下頁面,立馬又可以使用了。
ps :
如果圖示亮但不能除錯並且提示:
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
是因為你頁面引用的vue是壓縮版本的,預設會關閉除錯,要引入vue.js。
另外種方法是在或者在程式碼的主檔案中配置vue的環境:
Vue.config.devtools = true;
(該方法沒有親測)