如何在移动浏览器上访问开发工具

最近，我和几个朋友在做一个业余项目。很遗憾，我的电脑在新冠疫情期间坏了，由于封锁期间我没法去修，所以只能用手机写代码了🤦🏾‍♂️。

不知何故，我的代码在离线时运行完美，但由于某些原因，它在线上运行不佳🤒
当然，我需要开发工具来访问控制台并检查错误。

经过几分钟的谷歌搜索后，我发现使用Eruda 🎉在移动浏览器上访问开发工具是完全可能的。

以下是如何在 Chrome 移动浏览器上打开开发工具

步骤 0

单击 chrome 菜单中的星号 ⭐ 符号，为当前页面添加书签。

完成此操作后，您应该会看到一个Bookmarked带有编辑按钮的提示消息：

单击该edit选项并将书签详细信息更改为以下内容：

姓名：

移动开发工具

URL（复制并粘贴以下代码）：

javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();

步骤 1

• 访问您要检查的网页
• 在搜索栏中输入关键字Mobile Dev Tool（您应该看到我们之前添加书签的页面，其 URL 以 javascript:... 开头）单击该 URL

• 等待 3 秒，Eruda 图标就会出现，如下所示

• 单击图标打开您的开发工具

• 尽情享受吧！🎉

使用 Eruda 开发工具可以实现以下功能

• 查看 JavaScript 控制台
• 检查元素
• 跟踪 Ajax 请求
• 查看网站源文件
• 直接从网页更改 CSS
• 以及其他出色的功能

结论

Eruda 是一个开源的 JavaScript 包，公开托管在 GitHub 上，欢迎大家贡献代码。
如果您觉得这篇文章有用，欢迎分享给朋友们🤗

最后，我也会在 Twitter 上分享和转发科技资讯，请关注我@asaolu_elijah

感谢阅读❤️