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