ロジックの確認
console.log を使います
console.log("Hogehoge")
- 一番簡単Debugger方法、consoleにデータを表示するコード
console.traceを使います
console.trace('ここまでの処理');
- logまでの実行した経路が表示されます。
Debugger
debugger
- ロジック実行途中に止めたい場合、debugger を使います。
- 止めるときに、実行途中のデータが見えます。
Breakpoint
- Browserの検証モードでBreakpoint設定できます。
- Step by Stepのdebug
UIのDebugger
Css computed
- style computedで現在有効しているスタイルが確認できます。
- 有効しているスタイルはどこに設定しているか確認できます。
Css生編集
- スタイルを直接に確認したい場合、ブラウザで直接にスタイルCSSが設定できます。
HTML生編集
- HTMLを直接に確認したい場合、ブラウザで直接に確認できます。
- Div移動したり、削除したりもできます。
画面のサイズの確認
Vuejs
VueDev tool Extension
https://devtools.vuejs.org/guide/installation.html
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
- vuejsのコンポネントのデータなどが分かります
Mobile Vconsole
https://github.com/Tencent/vConsole
http://wechatfe.github.io/vconsole/demo.html
- モバイルで確認できます。