跳到主要内容

30、如何debug

浏览器环境下的javascript, 实际上有两个天生缺陷：

1、 不严谨.不同浏览器的js实现上会略有不同.这个问题在android,ios上也一样.；
2、 不是严格意义上的计算编程语言.有语法漏洞.例如“==”；

所以,我们要驾驭好JS语言,就要知道如何有效的Debug.

时刻留意 vue server

我们开发时的命令:

$ npm run dev

会开启一个”开发服务器”, 这个开发服务器的后台,我们要时刻留意输出.有时候我们把代码写错了, 导致Vuejs无法编译, 前台就会一片空白, 还没有任何出错提示.

 

上面的错误提示很好理解,说 “编译时出现错误”,也给出了错误的详细位置.

看developer tools 提出的日志

无论是chrome, safari 还是firefox, 以及 IE 7+ , 都带有这个工具. 特别好用. 任何时候页面空白了,都要首先看它, 而不是问别人: “页面怎么不动了?”

由于JS代码不是特别严谨, 所以给出的错误提示也都很概括.我们可以做个对比:

  • JSP 错误可以精确到某行
  • PHP 错误可以精确到某行
  • Rails 错误可以精确到某行
  • Vuejs, Angular, Titanium 等JS框架: 错误可以精确到 “某个文件”.

这是由于, 所有的JS框架的表现层, 都是”框架怪胎”, 是一种跟js语言环境妥协的代码.出了问题很难定位到最底层的根源.

而JSP, PHP, Rails ERB, 则是 “正常框架”, 出了问题可以直接找到最底层.

所以,我们要有一定的经验来Debug. 来理解错误日志.

例如下图:

 

vue.esm.js?65d7:434 [Vue warn]: Property or method "博客详情页" is not defined on 
the instance but referenced during render. Make sure to declare reactive data 
properties in the data option. 

found in 

---> <Blog> at /workspace/test_vue_0613/src/components/Blog.vue 
       <App> at /workspace/test_vue_0613/src/App.vue 
         <Root>
  • vue.esm.js?65d7:434 表示错误的来源. 这个文件一般人不知道来自于哪里, 我们暂且认为它来自于临时产生的文件,或者虚拟js机中.
  • Property or method "博客详情页" is not defined ... 这句话提示了错误的原因.
  • found in ... <Blog> at ... 这里则是调用栈, 可以看出, 文件是从下调用到最上面的. 问题出在最上面的文件. 但是没有给出错误的行数.

查看页面给出的错误提示(来自于dev server)

如下图:

 

  Error compiling template: 

    <div class='logo'> 
      <img src='http://siweitech.b0.upaiyun.com//image/570/siwei.me_header.png'/> 
    </div> 
  <template> 
  <script> 
  </script> 
  - Component template should contain exactly one root element. If you are using v-if 
  on multiple elements, use v-else-if to chain them instead. 
  - Templates should only be responsible for mapping the state to the UI. Avoid 
  placing tags with side-effects in your templates, such as <script>, as they 
  will not be parsed. 
  - tag <template> has no matching end tag.

这里Error compiling template: 给出了提示, 错误是由于 模板在被编译时产生的.

下面给出的HTML代码则是出错的点.

@ ./src/components/Logo.vue 6:2-177 
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/BlogList.vue 
@ ./src/components/BlogList.vue 
@ ./src/router/index.js 
@ ./src/main.js 
@ multi ./build/dev-client ./src/main.js

这里是调用栈. 可以看到,@ ./src/components/Logo.vue 6:2-177, 所以错误在于Logo.vue, 第六行第二列.

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有