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 安装插件，如下：

登录可见。

在组件中引入

登录可见。

调用

登录可见。

登录可见。

https://github.com/Tencent/vConsole

eruda

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

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

登录可见。

在组件中引入

登录可见。

调用

登录可见。

登录可见。

https://github.com/liriliri/eruda

（完）

小渣渣

vConsole 直接 js 引入

登录可见。

初始化

登录可见。