vue-devtools調試工具安裝與使用的簡單教程

2020-12-26 青春歲月共勉

使用vue開發項目時,如果習慣vue當前項目一些操作後相關數據的變化的log,可以安裝一個vue-devtools調試工具,如何安裝呢?請看下邊:

一:下載與安裝:

1.下載好vue-devtools壓縮包(crx類型的壓縮包),直接解壓到你自己選擇的本地目錄中:

2.打開谷歌瀏覽器,打開設置,並找到擴展程序:

3. 打開擴張程序按鈕後,需要先把右上角的開發者模式打開,默認是關閉狀態:

4.點擊''加載已解壓的擴展程序''按鈕,選擇剛才你下載並保存vue-devtools工具的目錄(我自己是安裝在D盤的vue-devtools目錄),點擊''選擇文件夾''按鈕即可:

自動回到瀏覽器後出現如下邊圖1紅色框,然後刷新瀏覽器,出現圖2紅色框的log,說明安裝成功了:

圖1
圖2

這樣我們就可以使用vue-devtools調試工具,查看vue項目數據變化的log了。

二:了解並使用

1.將本地的vue項目跑起來後,在瀏覽器打開你的項目,打開開發者模式,你會看見地址欄下邊多出了vue選項:

2.打開這個vue後,有以下頁面(相關按鈕的功能介紹如下圖):

相關焦點

  • vue-cli安裝步驟詳解
    腳手架是指通過輸入簡單指令幫助你快速搭建好一個基本環境的工具。經過一番焦急的等待,我終於等到安裝好的這一刻了,可以看到element-ui-test目錄下已經新建好了一個demo文件夾了,裡面就是我們安裝的目錄結構了。還是使用cnpm 安裝 npm 運行,下載的適合就用國內淘寶的鏡像會比較快速,也不會下載中斷或出錯。
  • 調試工具SignalTap使用教程
    明德揚設計的工程經常使用到Quartus Ⅱ軟體,其中常用的調試工具就是SignalTap。當代碼經過仿真沒有問題,但加載到FPGA電路板後,發現功能不正確時,我們就可以用signalTap工具進行分析,它的作用就類似於一個數字邏輯分析儀。今天就給大家分享SignalTap的使用教程。
  • 如何使用vue3搭建項目框架並運行
    打開Git命令窗口2、使用npm命令安裝vue/cli,這裡需要使用--force;由於之前安裝了vue2下的vue cli,需要覆蓋之前的切換到項目根目錄,cd kmw5、使用npm install安裝項目依賴包以及模塊
  • 如何在vue項目中使用sass並設置元素樣式
    在創建vue框架項目時,可以使用CSS3定義元素樣式;還可以使用sass動態變量定義元素樣式。如果直接使用sass,啟動項目會出現報錯。那麼,如何在vue項目中使用sass?下面利用實例說明:1、打開HBuilderX開發工具,新建項目,選擇普通項目;然後輸入項目名稱wmk,選擇vue模板,接著點擊創建按鈕
  • Vue 3.0 來了,我們該做些什麼?
    devtools類型: boolean 默認值: true 如何使用:app.config.devtools = true>是否開啟 vue-devtools 工具的檢測,默認情況下開發環境是 true,生產環境下則為 false。
  • 使用腳手架3創建的vue項目配置成多頁面的簡單案例
    前言:使用腳手架創建的vue項目工程默認是屬於單頁面單入口的,有時根據開發需要,經常要求將傳統的單入口頁面改成多入口多頁面的項目,其實腳手架3創建的vue項目,官方提供了一個叫pages的對象,我們可以自行創建一個vue.config.js文件,在裡邊進行一些配置,如,
  • 尤雨溪介紹 Vue 3:語法不變、TS 支持很好、2.0 系列還會發一個版本
    首先,beta 階段意味著:已合併所有計劃內的 RFC已實現所有被合併的 RFCVue CLI 現在通過 vue-cli-plugin-vue-next 提供了實驗性支持此外還提供了一個用於 Vue 3 的最小化 webpack 配置,支持單文件組件其中有一個主要的 RFC 是關於新引入的
  • Vue.js 教程:構建一個特斯拉汽車餘電計算器
    這篇教程關注的是全新的汽車駕駛體驗。電動汽車已經是公認的未來趨勢。但很多人都關心的一個問題是,電車充滿電後究竟可以跑多遠?行駛速度、氣溫和輪轂尺寸會對續航裡程有什麼影響?在本教程中,我們會使用 Vue.js 這個容易理解的 JavaScript 框架製作一個儀錶盤,通過它可以計算特斯拉電動汽車在不同情況下的行駛距離。
  • Vue全家桶之Vue2.X和Vue3.X腳手架創建項目的不同方式
    Vue 的基礎語法 ,常用特性 ,組件化開發以及路由的使用前面的文章已經全部介紹了,同時也介紹了如何使用webpack的一些依賴loaders和插件來一步步創建項目的。今天來介紹一些如何使用vue腳手架來創建項目通過腳手架Vue cli 腳手架來創建項目有三種方式:1.基於 交互式命令行 的方式,創建 Vue項目 使用命令 vue create my-project (基於Vue cli 3.X以上版本 npm install
  • 關於音效卡調試教程
    關於音效卡調試教程(一)5.1音效卡的硬體安裝我們還是從最基本的開始,以老款SB Live5.1
  • 用Vue 和Bootstrap 4 來構建Web前端界面
    安裝和設置Bootstrap-Vue項目提供了Bootstrap項目中jQuery組件依賴了Vue替換方案,可以實現絕大多數案例和組件的替代。我們建議以Vue Cli插件方式使用,這樣可以實現項目自動創建和配置,依賴項添加。
  • 真空覆膜機的安裝調試
    真空覆膜機,又稱真空吸塑機,主要用於各種衣櫃櫥櫃門門板的覆膜、木門覆膜、移門覆膜、軟包裝飾皮革覆膜,它是生產定製家具不可缺少的主要設備之一,尤其是衣櫃門和櫥櫃門,這裡簡單介紹一下真空覆膜機的安裝調試以及生產過程中應該注意的問題。
  • Fiddler:程式設計師必備的網絡抓包調試工具
    Fiddler是一個非常流行的網絡抓包調試工具,也算是比較出名吧。其實說起抓包工具,很多人可能先想到的是wireshark這個經典工具。不過wireshark側重於網絡抓包,可以抓所有類型的數據包,並且解析包的內容。
  • vue3.0來了,你還學得動嗎?
    最後上實踐,來用Vue3.0做一個簡單的TodoList示例使用vite初始化項目what?什麼是vite,這是尤大神在今年新鼓搗出來的東西,官網的解釋就是這是一個原生支持ES模塊的開發構建工具,基於webpack的構建過程緩慢,因此vite騰空出世,當然可以選擇試試。
  • Vue.js 很難學?看看這個由 DCloud 與 Vue 官方合作推出的免費入門...
    介紹現在馬上是2020年的下半年的開端,大前端發展迅猛,前所未有的繁榮,但還有很多前端開發者,特別是非一線城市的開發者還在使用 jQuery/zepto 來開發web頁面。如果你想開始嘗試學習 Vue.js,在 Vue.js 官網閱讀文檔教程又比較吃力,這套視頻教程基於Vue.js 官網文檔,用更加通俗易懂的方式和代碼實例來幫助你入門 Vue.js 。
  • 監控攝像頭安裝圖解及教程
    監控攝像頭安裝首先要了解監控攝像頭的網絡環境及如何組網。這也是大多數人對監控安裝不太明白的地方。今天我們就簡單的說說監控攝像頭的安裝教程。監控攝像頭安裝準備工作小型視頻監控系統組網比較簡單,需要的設備有:監控攝像頭、交換機、路由器、網線及一些基本安裝工具,包括網線鉗、水晶頭、剝線刀、測線儀等。
  • Android Studio軟體免費下載及安裝教程
    Back to School Android Studio軟體免費下載及安裝教程 Android Studio 是谷歌推出的一個Android集成開發工具,基於IntelliJ IDEA.
  • 不鏽鋼振動篩的安裝與調試
    用戶在收到不鏽鋼振動篩後該如何安裝和調試呢?在正規的振動篩廠家購買不鏽鋼振動篩在出廠前是又嚴格的檢驗的,但在運輸過程中由於外力,設備會有一些鬆動問題,所以用戶在接收到不鏽鋼振動篩後需要進行安裝和調試。下面小編就講解一下用戶在接收到不鏽鋼振動篩後該如何安裝和調試步驟。
  • Java開發工具Eclipse下載安裝詳細教程
    學習 Java 語言程序設計必須選擇一個功能強大、使用簡單,能夠輔助程序設計的 IDE。Eclipse 是目前最流行的 Java 語言開發工具,它強大的代碼輔助功能,可以幫助開發人員自動完成語法修正、補全文字、代碼修復、API 提示等編碼工作,大量節省程序開發所需的時間。
  • 刺繡工具使用教程
    本視頻教程由柴七七創意刺繡工作室製作本期刺繡視頻教程您將會了解1、繡線的處理   a拆線的幾種方法   b繡線的分股   c穿針打結   d繡線相應股數2、轉印紙/水消筆的使用(如何轉印圖案)3、繡繃的使用4、收針打結刺繡新手小可愛們收到我們家的刺繡材料包,先不要著急繡,耐心地先看完本期刺繡工具使用視頻教程,正確地使用繡線和相關刺繡工具,做好刺繡前的工作,為繡出更好的作品做好準備。