Angular 9 系列（十）嵌入vconsole、eruda开发者调试面板

小渣渣

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 系列（六）调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 系列（七）css样式作用域
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 系列（八）更新子组件的值通过set触发事件
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 系列（九）#id 选择器在页面应用
https://www.itsvse.com/thread-9278-1-1.html

在 pc 端访问网站，我们可以通过浏览器按 F12 开启调试工具，查看输出日志、网络请求、网页元素、cookie等信息。

但是，我们做移动或者小程序、app开发的时候，出了异常问题，我们就无法直接查看异常信息了。
纯html网页教程：

【前端必备】开发者调试面板
https://www.itsvse.com/thread-9285-1-1.html

本文推荐两个前端开发者调试面板，嵌入到 Angular 9 项目。

先看效果图：



vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

教程如下，执行 npm 安装插件，如下：

登录可见。

在组件中引入

登录可见。

调用

登录可见。

登录可见。

超链接登录可见。

eruda

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

教程如下，执行 npm 安装插件，如下：

登录可见。

在组件中引入

登录可见。

调用

登录可见。

登录可见。

超链接登录可见。

（完）

小渣渣

vConsole 直接 js 引入

登录可见。

初始化

登录可见。