强大的侧边栏 DevTools 替代方案 - 浏览器侧边栏中的元素、控制台、网络、源和应用程序面板
ALT-DEV TOOLS 是一款开发人员工具,它将基本的 Chrome DevTools 功能带入方便的侧边栏。它允许您检查元素、查看控制台日志、监视网络请求、浏览源文件以及管理网站存储,而无需打开 DevTools 窗口。当您浏览时,所有内容都保持可见,使调试更快、更容易。
此扩展对于前端开发人员、Web 开发人员、QA 测试人员以及任何希望在网站上工作时快速访问调试工具的人非常有用。
主要特点
元素检查器
浏览页面 DOM 结构并直接从网页检查元素。您可以实时查看和编辑文本、HTML 属性和 CSS 样式。该面板还显示盒模型(边距、边框、填充),并允许您强制元素状态,例如悬停、焦点和活动。还可以查看附加到元素的事件侦听器。
安慰
从页面查看和捕获控制台日志,包括日志、警告、错误、信息和调试消息。您可以直接在页面上下文中运行 JavaScript 并检查结果。可以扩展对象,并且可以通过命令历史记录访问以前的命令。
网络监控器
跟踪页面发出的网络请求,包括 fetch 和 XMLHttpRequest 调用。每个请求都会显示标头、有效负载、响应数据和计时信息等详细信息。可以搜索、过滤和排序请求。您还可以将请求导出为 HAR 文件或将其复制为 cURL 命令。
来源查看器
在有组织的文件树中浏览网页加载的 JavaScript、CSS 和 HTML 文件。文件包括语法突出显示和行号。您还可以格式化缩小的代码并在所有加载的文件中搜索文本。
应用程序存储
查看和管理当前站点的 cookie、localStorage 和 sessionStorage。您可以在测试应用程序时检查值、过滤条目、删除单个项目或清除存储。
键盘快捷键
按 Enter 运行控制台命令。
使用箭头键导航命令历史记录。
按 Esc 键取消编辑。
使用 Ctrl + Shift + F 跨源文件搜索。
权限
该扩展程序需要访问活动选项卡才能检查网页。脚本注入允许它与页面内容交互。存储权限用于保存设置,cookie 访问允许查看和管理当前站点的 cookie。
局限性
一些高级调试功能(例如 JavaScript 断点、CPU 分析和内存检查)需要 Chrome DevTools,并且在扩展中不可用。网络监控可能无法捕获每个浏览器内部请求,并且具有严格安全策略的页面可能会限制某些功能。
ALT-DEV TOOLS 通过在浏览时将基本工具保留在侧边栏中,帮助开发人员更方便地检查和调试网站




