1. 程式人生 > >安裝vue開發除錯神器vue-devtools

安裝vue開發除錯神器vue-devtools

使用cnpm代替npm按照依賴包了,npm安裝依賴包確實太慢了…
cnpm安裝檢視上篇文章

下載chrome擴充套件外掛完成後開啟命令列cmd進入vue-devtools資料夾,輸入命令

cnpm install

這裡寫圖片描述

如果在安裝時報錯
這裡寫圖片描述

[[email protected]^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)

輸入命令

npm update

這裡寫圖片描述

輸入命令

cnpm run build

這裡寫圖片描述

期間如圖全是紅色錯誤,將下載的vue-devtools-master

Chrome外掛刪除,重新再一遍就好了
這裡寫圖片描述

C:\t00l\vueTool\vue-devtools-master\shells\chrome\manifest.json 檔案的”persistent”:false改成true
這裡寫圖片描述

新增chrome擴充套件外掛

1.開啟chrome瀏覽器,右上角三個點>更多工具>擴充套件程式

2.再點選載入已解壓的擴充套件程式,然後選擇C:\t00l\vueTool\vue-devtools-master\shells\chrome資料夾
這裡寫圖片描述

最後打開個vue寫的專案,f12開啟除錯工具即可進行vue專案的除錯
這裡寫圖片描述

相關推薦

安裝vue開發除錯神器vue-devtools

使用cnpm代替npm按照依賴包了,npm安裝依賴包確實太慢了… cnpm安裝檢視上篇文章 下載chrome擴充套件外掛完成後開啟命令列cmd進入vue-devtools資料夾,輸入命令 cnpm install 如果在安裝時報錯 [[em

vue 開發除錯工具vue-devtools 安裝

安裝前的準備 因為安裝依賴需要Node.js環境。所以,第一件事就是安裝Node.js。 安裝完成之後,從github的下載地址將該外掛下載下來:https://github.com/vuejs/vue-devtools 安裝步驟 下載之後,解壓檔案,然後複製貼上解

Vue除錯神器vue-devtools安裝

vue-devtools是一款基於chrome遊覽器的外掛,用於除錯vue應用,這可以極大地提高我們的除錯效率。接下來我們就介紹一下vue-devtools的安裝。 chrome商店直接安裝 vue-devtools可以從chrome商店直接下載安裝,非常簡單,這裡就

Vue除錯神器vue-devtools

手動安裝方法: 1.找到vue-devtools的github專案,並將其clone到本地. vue-devtools git clone https://github.com/vuejs/vue-devtools.git 2.安裝專案所需要的npm包 $ npm ins

vue除錯工具 vue-devtools

vue-devtools是一款基於chrome遊覽器的外掛,用於除錯vue應用,這可以極大地提高我們的除錯效率。接下來我們就介紹一下vue-devtools的安裝 可以去chrome 商店尋找安裝 但需要翻牆 github上下載是比較簡單的 git clone

vue學習記錄(一)—— vue開發調試神器vue-devtools安裝

shell gist 項目 擴展工具 code blog manifest false .net 網上有些貼子少了至關重要的一步導致我一直沒裝上, 切記!!install後還需build,且install和build都在vue-devtools文件夾內執行 github下載

Vue除錯神器Vue.js devTools

Vue專案中使用Vue.js devTools這款除錯神器,可以極大程度的提高我們的開發效率。 安裝 1、開啟Chrome網上應用商店安裝外掛(自牆),直接搜尋devTools安裝即可。貴賓傳送陣,請戳這裡→Chrome網上應用商店 2、從github上下載到本地。貴賓傳送陣,請戳這裡→vue-devt

vue除錯工具vue-devtools安裝

先導vue-devtools是一款基於chrome瀏覽器的外掛,用於vue應用的除錯,這款vue除錯神器可以極大地提高我們的除錯效率。幫助我們快速的除錯開發vue應用。第一步:  我們可以先從githu

vue開發:詳解vue.js的devtools安裝

安裝 2.下載好後進入vue-devtools-master工程 執行npm install ----->npm run build. 3.修改manifest.json 中的persistent為true 4.開啟谷歌瀏覽器設定--->擴充套件

Vue開發devtools

html 開發者模式 程序 選擇文件夾 uil npm 右擊 執行 image 在使用vue-cli開發SPA應用的時候,經常看到控制臺會提示 說是下載Vue Devtools擴展以獲得更好的開發體驗,那麽vue-devtools是什麽呢?我們不妨點擊他們給的GitHub

vue開發環境安裝步驟

highlight 查看 project vue 啟動 blog 安裝 模版 gis 前提:vue開發前提是安裝好nodejs後,在nodejs環境下運行 1.npm工具在國內的網絡環境下比較慢 推薦使用淘寶npm鏡像https://npm.taobao.org/

vue-devtools vue調試神器

-- 完成 頁面 開發 點擊 ice span blank fmt Vue調試神器vue-devtools安裝 vue-devtools是一款基於chrome遊覽器的插件,用於調試vue應用,這可以極大地提高我們的調試效率。接下來我們就介紹一

Vue開發除錯工具--除錯工具篇

主要講三個東西: Vue.js devtools開發工具的使用 使用debugger和sourcemap除錯Vue元件 vscode中除錯Vue元件 Vue.js devtools開發工具的使用

vue中使用vconsole--移動端除錯神器

Vue中使用vconsole除錯手機移動端的點選事件 先使用npm install vconsole下載安裝依賴包 在Vue專案中新建 vconsole.js 檔案 ,在檔案中寫入 import Vconsole from 'vconsole' const vConsole = ne

vue-devtoolsvue瀏覽器除錯工具

開vue官網在vue-生態系統-工具可以看到vue-devtools這個工具: vue-devtools是一款基於chrome遊覽器的外掛,用於除錯vue應用,這可以極大地提高我們的除錯效率。接下來我們就介紹一下vue-devtools的安裝。 vuet除錯工具兩種安裝方

Centos7 yum安裝nginx,vscode配置vue開發環境

建議在centos和ubuntu中使用yum或者apt-get安裝軟體: 安裝yum源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.no

cordova + Vue 開發 APP 生成原生安裝

什麼是 cordova cordova 是由 Apache 基金會支援的,使用 HTML5 + CSS3 + JS 來構建多平臺 APP 程式的開發框架。其支援呼叫手機系統(Android、IOS、Windows phone)原生 API,它可以將你寫的 Web 程式包裹進原生的 APP 殼中,

Vue + quasar-framework進行Vue混合app開發 ─ App真機除錯(三)

寫程式碼總避免不了會出錯需要除錯,Quasar混合開發的app除錯方法也很簡單,就和平時寫web端程式碼除錯一樣。 此處列幾種常用的除錯方法 真機除錯 真機除錯也就是用自己的手機進行除錯,完全真實環境。

Vue開發之vscode安裝使用

1、vscode安裝 vscode是一款免費開源的現代化輕量級程式碼編輯器。在vscode官網下載vscode安裝包 直接安裝即可。有必要可以安裝一下外掛。 2、vscode是開發vue專案的好幫手,安裝完成之後新建一個工作區(資料夾)存放程式碼,在vscode

安裝vue開發環境→安裝淘寶映象的時候報錯

 問題:npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket d