类别:<跨度>调试

调试器关键字

betway必威滚球

昨天，我们介绍了如何使用带有

标记的JSON管道在网页上调试JSON数据。

             
今天，我想介绍另一种可以节省时间的调试技术调试器关键字。

             
当你想在你的web应用程序中添加断点时，添加Javascript指令:

             
              
              

               调试器；
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

             
然后在浏览器中打开开发工具并导航到应用程序URL。只要Javascript碰到调试器语句，运行时就会停止在那个断点上，允许你调试代码:

             

              
             

             
一旦浏览器在该断点上暂停，就可以通过单击浏览器开发工具中的行号添加其他断点，就像常规调试器一样。

             
有两件重要的事情需要注意:

             
    
              
  1. 断点仅在开发工具打开时才有效
    2. 
              
  2. 别忘了去掉调试器语句。您可能不希望将其发布到生产环境中。
    3.

使用JSON管道进行调试

betway必威滚球

我们都用过console.log调试我们的代码。在Angular中，有一个有趣的替代方案可以临时在我们的web页面上显示调试信息JSON管．

主要用途如下:

              

               <<跨度class="hljs-name">跨度>myData | json<跨度class="hljs-tag">跨度>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

中以JSON字符串的形式输出数据跨度元素，但它不会被格式化，所以JSON字符串可能很难阅读:

              

               ｛<跨度class="hljs-string">“关系”：<跨度class="hljs-string">“友好的”，<跨度class="hljs-string">“象征”：<跨度class="hljs-string">“默认土地单位”，<跨度class="hljs-string">“雁行”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“mod1”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“mod2”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“uniqueDesignation”：<跨度class="hljs-string">＂＂，<跨度class="hljs-string">“higherFormation”：<跨度class="hljs-string">＂＂，<跨度class="hljs-string">“reinforcedReduced”：<跨度class="hljs-string">＂＂，<跨度class="hljs-string">“飞行”：<跨度class="hljs-literal">假，<跨度class="hljs-string">“活动”：<跨度class="hljs-literal">假，<跨度class="hljs-string">“安装”：<跨度class="hljs-literal">假，<跨度class="hljs-string">“工作组”：<跨度class="hljs-literal">假，<跨度class="hljs-string">“commandPost”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“tacticalMissionTasks”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“类型”：<跨度class="hljs-string">“土地单位”｝
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

相反，下面的语法工作得更好:

              

               <<跨度class="hljs-name">精准医疗>myData | json<跨度class="hljs-tag">精准医疗>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

的精准医疗HTML标签代表“精准医疗格式化”内容。因此，该标记将保留任何空白、新行和制表符，这使得读取JSON数据变得更容易:

              

               ｛<跨度class="hljs-string">“关系”：<跨度class="hljs-string">“友好的”，<跨度class="hljs-string">“象征”：<跨度class="hljs-string">“默认土地单位”，<跨度class="hljs-string">“雁行”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“mod1”：<跨度class="hljs-string">“没有”，<跨度class="hljs-string">“mod2”：<跨度class="hljs-string">“没有”｝
              
代码语言:<跨度class="shcb-language__name">JavaScript<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">javascript<跨度class="shcb-language__paren">）

这是一个简单的技巧，但在调试使用复杂JSON结构的代码时节省了大量时间。