首頁 擴充插件 Chrome插件 Vue.js devtools V5.1.1

Vue.js devtools V5.1.1

下載Vue.js devtools的crx檔案後,開啟Chrome的擴充頁面(chrome:// extensions /或按Chrome選單圖示>更多工具>擴充功能尋找),然後拖曳crx檔案到擴充頁面安裝它;
4、點擊「新增拓展程式」完成安裝。

158651) .jpg


5、Vue.js devtool插件安裝後無法使用,出現提示“vue.js not detected”,這時我們可以使用下面的方法:


第一,我們要找出Vue.js devtool外掛的安裝目錄。 (如果真找不到插件的安裝位置,可以在本機電腦搜尋插件的ID:nhdogjmejiglipccpnnnanhbledajbpd。)不同作業系統中chrome插件安裝位置不同,例如win8系統中chrome插件的安裝位置:C:\Users\Administrator\ AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
第二,在找到了Vue.js devtool插件的安裝目錄後,開啟mainifest.json檔案(這是關鍵)。

1586512( .jpg


將mainfest.json中代碼persistent:false,修改成persistent:true。如下圖所示:

1586507423(1).jpg


一般情況下,修改完如上的位置的程式碼。開啟vue專案後,在控制台選擇vue,就應該可以正常使用了。

158651) .jpg


第三,如果透過上面的方法調整過後,還是不能夠使用,那麼可以調整一下webpack.config.js的程式碼,如下圖所示:< /p>

158651). jpg最後,重啟一下你的vue專案應該就可以使用了。


1586507477(1).jpg

二、原始碼安裝方式

1、在github下載devtools原始碼,位址:https:// github.com/vuejs/vue-devtools。

158651) .jpg

2、下載好後進入vue-devtools-master工程執行cnpm install, 下載依賴,然後執行npm run build,編譯原始程式。

158651) .jpg

jpg"
3、編譯完成後,目錄架構如下:

1586507537(1).jpg

修改為true:

1586507583(1).jpg

 4、開啟Google瀏覽器的設定--->擴充程序,並勾選開發者模式

1586507507965101566.jpg

然後將剛剛編譯後的工程中的shells目錄下,chrome的整個資料夾直接拖曳到目前瀏覽器中,並選擇啟用,即可將插件安裝到瀏覽器。
1586507643( /></p><p>5、開啟一個現有的vue項目,執行項目,然後在瀏覽器中--->設定--->更多工具--->開發者工具,進入偵錯模式:<br/>發現vue.js is not detected  ,可以調整webpack.config.js的程式碼:<br/><img src=1586507678(1).jpg 

最後,重啟了你應該可以使用的項目。
 1586507.jp( /></p><p>小結:Vue.js devtool插件安裝後出現提示「vue.js not detected」的問題,首先在擴充功能中選擇開發者模式,開啟插件的安裝目錄,將mainifest.json中的persistant為true,如果還不行就調整一下webpack.config.js的程式碼,最後重啟vue專案就可以使用。 </p><p><br/></p>                </div>



                <div class= 免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

如何安裝vue.js devtools? 如何安裝vue.js devtools?

24 Nov 2020

安裝方法:1、下載zip安裝包,並解壓縮到指定資料夾中;2、進入Vue devtools目錄下,輸入「yarn install」和「yarn run build」進行安裝;3、設定manifest json檔;4、手動擴充chrome插件。

Chrome的插件擴充功能安裝目錄是什麼 Chrome的插件擴充功能安裝目錄是什麼

08 Mar 2024

Chrome的插件擴充功能安裝目錄是什麼?正常情況下,Chrome外掛程式擴充功能的預設安裝目錄如下:1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User

插件怎麼安裝 插件怎麼安裝

14 Jun 2019

插件安裝的方法:如Chrome插件安裝,首先開啟Chrome瀏覽器,進入插件管理介面。然後將下載好的外掛檔拖曳到Chrome外掛程式管理介面中去,放開滑鼠。然後Chrome會跳出安裝插件的提示,點擊新增即可。

Chrome的插件擴充功能安裝目錄是什麼在哪個資料夾 Chrome的插件擴充功能安裝目錄是什麼在哪個資料夾

07 Mar 2024

正常情況下,Chrome外掛程式擴充功能的預設安裝目錄如下:1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome外掛程式預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\UserData\Default\Extensio

如何使用 C 和 NPAPI 開發 Chrome、Safari 和 Opera 瀏覽器外掛程式? 如何使用 C 和 NPAPI 開發 Chrome、Safari 和 Opera 瀏覽器外掛程式?

09 Nov 2024

為 Chrome、Safari 和 Opera 編寫瀏覽器插件為 Chrome、Safari 和 Opera 等瀏覽器建立瀏覽器插件涉及一組特定的...

如何理解HTTP中的Content-Type 如何理解HTTP中的Content-Type

14 Sep 2017

0x01.About查看Restful API 標頭插件:Chrome插件REST Console,以及發送Restful API工具:Chrome插件POST Man在HTTP 1.1規格中,HTTP請求方式有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT通常我們用的只有GET、POST,然而對於Restful API

See all articles See all articles

Hot Tools

Talend API Tester

Talend API Tester

Talend API Tester外掛程式以前稱為Restlet Client是由開發人員設計和開發,是一款能夠幫助程式設計師進行網頁偵錯的工具。 Talend API Tester讓調用,發現和測試HTTP和REST API變得容易。可與REST,SOAP和HTTP API進行視覺化互動.

Karson / tinytools

Karson / tinytools

Tiny tools(迷你工具)是一個Chrome的擴展,其中包含了很多有用的工具,如QR碼生成器,QR碼解碼、翻譯,時間戳轉換,源格式,JSON格式,圖像base64字符編碼等等。

Angular調試插件AngularJS Batarang

Angular調試插件AngularJS Batarang

angularjs batarang插件是一款功能強大的可以安裝到Google瀏覽器上使用的Angular調試插件,安裝使用這款angularjs batarang插件可以讓你在開發過程中更加便捷。

Detailed SEO Extension

Detailed SEO Extension

SEO是一種搜尋引擎的優化技術,網站的經營者需要發布一些優質的內容來滿足用戶的需求,從而博得搜尋引擎的喜愛,進而從搜尋引擎帶來搜尋流量。衡量搜尋引擎對一個網站的喜愛程度,通常都是由這種SEO指標組成,關於SEO我們介紹過許多的插件例如SEO工具條:SEOquake、META SEO inspector、5118站長工具箱- 必備SEO插件等等等,今天小編有為大家帶來了一個可以快速分析某個網頁的標題

xx