1、console对象

方法 描述 实例
console.log 打印变量值 console.log(x)
console.dir 打印对象的属性列表 console.dir(x)
console.table 打印对象列表时可以指定输出的字段属性 console.dir(array,[‘id’,’name’,……])

2、debugger语句

可以直接在代码中使用原生的 debugger 语句。

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       message: ''
  6.     }
  7.   },
  8.   mounted() {
  9.     const hello = 'Hello World!'
  10.     debugger
  11.     this.message = hello
  12.   }
  13. };
  14. </script>

注：如果你选择了这种方式，请千万记得当你调试完毕之后把这个语句移除。

可在webpack插件中自动移除debugger语句和console语句，注：仅用于生产环境

  1. plugin:[
  2.     new UplifyJsPlugin(){
  3.         uglifyOptions: {
  4.             compress: {
  5.                 warnings: false,//警告
  6.                 drop_debugger: true,//debugger
  7.                 drop_console: true,//console(注释掉)
  8.                 pure_funcs:['console.log'] // 移除console
  9.             }
  10.         }
  12.     }
  13. ]

3、Vue Devtools

image.png

4、Debugger for chrome

请点击查看文档