调试器关键字

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

标记的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. 别忘了去掉调试器语句。您可能不希望将其发布到生产环境中。

使用JSON管道进行调试

我们都用过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结构的代码时节省了大量时间。