iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
Modern Web

JS讀書筆記系列 第 27

JS讀書筆記30天 - Day27 Vue的前置工作與開發者工具

  • 分享至 

  • xImage
  •  

必要安裝

  1. 文字編輯器,像是VSCode、Atom、Sublime
  2. VSCode內插件Live Server或Preview on Web Server二擇一(或其他文字編輯器的類似插件)
  3. VSCode中插件Vue、Vue 2 Shippets(或其他文字編輯器的類似插件)
  4. Chrome插件Vue.js devtools

Vue的開發者工具:Vue.js devtools

安裝

依一般安裝Chrome插件的方式安裝:

安裝網址

螢幕快照 2020-10-12 下午10.22.34

安裝過後,在Chrome的開發者工具中會出現Vue的面板(通常會在最後一個):

螢幕快照 2020-10-12 下午10.25.27

打開之後:

螢幕快照 2020-10-12 下午10.26.27

因為Vue是資料驅動畫面,所以在除錯時,使用console.log()是沒有效果的,需要打開Vue的開發者工具。

所以資料如果在除錯時需要更改,也要從Vue的開發者工具來操作:

螢幕快照 2020-10-12 下午10.34.26


上一篇
JS讀書筆記30天 - Day26 Bootstrap的Class設定3
下一篇
JS讀書筆記30天 - Day28 MVVM概念
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言