LxDevtoolWeb

LxDevtoolWeb 是面向所有开发者的 Chrome 调试工具，集成请求头配置、模拟响应、URL 重定向和站点提示。把常用调试配置集中到浏览器中，方便处理接口联调、本地开发和环境识别等日常工作。

按标签页开启调试，不影响其他标签的请求。把调试配置留在浏览器，让下一次开发、联调和排查少一些重复操作。 LxDevtoolWeb 是面向所有开发者的 Chrome 调试工具，将请求头配置、模拟响应（Mock）、URL 重定向和站点提示集中在一个扩展中。 从为接口添加自定义请求头，到准备不同场景的响应数据；从把目标地址切换到本地服务，到为生产、测试站点加上醒目的环境标识，常见调试需求都能通过配置来组织。配合配置复制、Mock 分组、JSON 编辑与文件导出，把一次调试中整理好的规则留下来，方便后续继续使用。 🎯 核心特色：以浏览器标签页为单位开启，让调试与正常访问各自进行 除站点提示为全局启用外，请求头修改、模拟响应（Mock）和 URL 重定向均支持按浏览器标签页独立开启。需要调试哪个标签，就在那个标签中启用相应配置，不影响其他标签的请求。多个页面一起打开时，可以按当前任务选择调试范围。 站点提示采用全局开关，启用后按配置的 URL 规则在匹配页面显示环境提示，无需逐个标签开启。 即使打开的是同一个网站，也可以让一个标签用于调试，另一个标签保留真实请求，方便对照观察： • 接口联调：在标签 A 启用自定义请求头，验证特定业务条件；标签 B 保持原有请求头，查看正常访问结果。 • Mock 对照：在标签 A 使用空列表或特定字段的模拟数据，检查页面处理；标签 B 继续请求真实接口，对照实际返回。 • 重定向对照：在标签 A 将匹配请求转向本地或测试服务，标签 B 继续访问原目标，方便比较不同环境的结果。 • 日常排查：把调试操作集中在需要排查的标签，让其他打开的页面继续正常请求。 从“给当前页面加一条请求头”，到“保留一个真实页面作为对照”，按标签页开启让每次调试的范围更清楚，也让对照验证更方便。 🛠 请求头配置：按标签页独立启用，常用请求头集中管理 调试接口时，经常需要携带与服务端约定的环境标识、业务标记或其他自定义请求头。将这些内容保存为配置，就能在后续调试中继续编辑和使用，减少反复查找、复制与填写。 主要特色： ✔ 以浏览器标签页为单位开启，自定义请求头仅作用于已启用的标签，不影响其他标签的请求。 ✔ 自定义请求头名称和值，为不同用途添加描述，列表里就能辨认配置。 ✔ 支持单条配置启用与停用，按当前调试需要管理开关。 ✔ 支持复制已有配置，再调整名称、值或描述，方便准备相似场景。 ✔ 支持删除、清空和选中导出 JSON，便于整理常用配置。 例如，服务端约定通过 X-Debug-Env 读取测试环境标记，你可以保存对应的请求头和值，并用描述注明用途。在需要联调的标签启用后，另一个访问同一网站的标签可以保持原有请求头，方便比较不同条件下的结果。后续需要调整测试条件时，直接修改已有配置，减少重复录入。 🧪 模拟响应（Mock）：按标签页模拟数据，真实结果随时对照 接口尚未就绪、某种返回数据难以准备，或需要反复验证特定业务字段时，可以配置模拟响应，先准备好要观察的数据场景。 主要特色： ✔ Mock 按浏览器标签页独立开启，在一个标签使用模拟响应，其他标签仍可获取真实接口结果。 ✔ 按请求方法和 URL 配置匹配条件，支持 GET、POST、PUT、DELETE、PATCH 等方法。 ✔ 自定义 JSON 响应内容，准备正常数据、空列表或不同字段组合。 ✔ 内置 JSON 编辑器，支持树形、代码、表单、文本等视图，方便查看层级和修改内容。 ✔ 支持在页面内放大编辑区域，编辑较长的 JSON 时更方便。 ✔ 支持分组管理，按项目、接口模块或测试场景整理配置，也能将条目移动到其他分组。 ✔ 支持复制配置，在已有响应的基础上修改部分字段，逐步积累调试场景。 例如，可以为同一个列表接口分别准备以下数据： 正常列表：{"code":0,"data":[{"id":1,"name":"示例条目"}]} 空列表：{"code":0,"data":[]} 以上仅展示数据组织方式，实际内容按接口约定填写。分别启用对应配置并重新发起请求，就可以检查正常展示与空数据处理。把这些配置整理进“列表接口”分组，后续验证时也更容易找到。 还可以打开两个相同页面：在标签 A 启用空列表 Mock，观察空状态展示；标签 B 不启用 Mock，查看真实列表。模拟场景与真实结果分别放在两个标签中，更容易对照定位差异。 🔀 URL 重定向：按标签页切换访问目标，按规则保留路径与参数 需要让某个页面或请求访问本地服务，或者切换域名、路径和环境时，可以通过正则匹配原地址，再填写重定向结果。 主要特色： ✔ 按浏览器标签页独立启用，仅对启用该配置的标签应用重定向，其他标签继续访问原目标。 ✔ 用正则限定目标 URL，按域名、路径前缀或特定地址组织规则。 ✔ 使用捕获组提取路径、查询参数等内容，再组合到目标地址。 ✔ 支持将匹配地址转向本地、测试或其他服务。 ✔ 可按规则保留原路径与查询字符串，也可统一转向固定页面。 ✔ 支持配置名称、启用开关、复制和选中导出，便于管理不同调试用途。 常见用途包括： • 将网站或接口地址转向本地对应路径。 • 替换旧域名，保留原路径与查询参数。 • 将 /old/ 路径前缀替换为 /new/。 • 跳转到固定页面，按规则保留或丢弃原参数。 • 对支持 HTTPS 的站点进行 HTTP 到 HTTPS 的地址改写。 • 添加固定查询参数，或把查询参数中的值组合到路径中。 下面是四个容易上手的例子。example.com 为示例域名，请替换为实际地址；本地示例需先启动对应端口的服务。 示例 1：接口地址转向本地，保留路径和查询参数 目标URL：^https://api\.example\.com(/.*)$ 重定向到：http://localhost:8080\1 访问：https://api.example.com/users?page=2 结果：http://localhost:8080/users?page=2 适合本地服务与原接口使用相同路径的调试场景。 示例 2：替换域名，继续使用原来的页面路径 目标URL：^https://old\.example\.com(/.*)$ 重定向到：https://new.example.com\1 访问：https://old.example.com/docs/start?lang=zh 结果：https://new.example.com/docs/start?lang=zh 适合切换站点环境或验证新域名下的对应页面。 示例 3：修改路径前缀，保留后续路径和参数 目标URL：^https://www\.example\.com/old/(.*)$ 重定向到：https://www.example.com/new/\1 访问：https://www.example.com/old/docs?page=2 结果：https://www.example.com/new/docs?page=2 此规则匹配 /old/ 及其后的内容，适合验证路径迁移后的访问效果。 示例 4：把查询参数转换为路径 目标URL：^https://www\.example\.com/detail\?id=([0-9]+)$ 重定向到：http://localhost:8080/items/\1 访问：https://www.example.com/detail?id=123 结果：http://localhost:8080/items/123 此示例仅匹配查询参数为单独一个数字 id 的地址，适合目标服务通过路径接收该标识的场景。 🚦 站点提示：把环境名称直接显示在页面上 生产、测试和其他环境经常拥有相似的页面布局。为网站加上一条直观的提示，可以让当前环境更容易辨认，在执行操作前多一个提醒。 主要特色： ✔ 全局启用，按 URL 规则在匹配页面显示环境提示，无需为每个标签单独开启。 ✔ 使用正则匹配网站 URL，一条规则可用于同类地址。 ✔ 自定义提示内容，例如“生产环境，操作前请确认”“测试环境，可用于联调”。 ✔ 提供危险、警告、辅助三类主题，按环境用途选择提示样式。 ✔ 支持启用、停用、复制和删除，方便维护多个站点的提示规则。 ✔ 提示条带关闭按钮，可收起当前页面上的提示；需要暂停规则时，可在扩展中关闭对应开关。 例如，为测试站点填写匹配规则 ^https://test\.example\.com/，将提示设为“测试环境”。之后在匹配页面应用提示，切换站点时就多了一个直观的识别依据。 📂 配置管理：把临时调试需求整理成可持续使用的配置 项目一多，请求头、接口场景和重定向规则也会增加。LxDevtoolWeb 提供配置整理能力，让常用内容更容易维护： • 复制已有条目，再修改差异部分，减少重复配置。 • 为请求头、Mock 或重定向填写描述或名称，记录用途。 • 使用 Mock 分组区分项目、业务模块或测试场景，并在分组间移动条目。 • 选中需要的配置导出为 JSON，便于文件留存、分享和共同核对。 • 配置保存在浏览器本地，再次打开扩展可以继续编辑。 分组用于整理 Mock 条目。测试某个场景时，仍需检查对应配置的启用状态，让实际参与调试的条目与当前任务一致。 👩‍💻 适合哪些开发场景 • 接口开发与联调：设置自定义请求头，核对不同业务条件下的请求表现。 • 同站点对照调试：一个标签按需启用请求头、Mock 或 URL 重定向，另一个标签保持原有请求，方便比较调试结果。 • 页面与业务逻辑验证：准备正常、空数据或其他字段组合，检查应用对返回内容的处理。 • 本地服务调试：将匹配的页面或请求地址转向本地服务，并按规则保留路径和参数。 • 测试与问题排查：整理可重复使用的数据场景，便于多次验证同一问题。 • 多环境工作：为不同网站添加环境提示，减少频繁切换时的辨认成本。 无论负责接口、页面、全栈开发还是联调排查，只要需要在浏览器中管理这些调试条件，都可以从自己的常用场景开始配置。 🚀 开始使用 1. 点击“添加到 Chrome”安装扩展，并将其固定到浏览器工具栏。 2. 打开需要调试的普通网页，点击 LxDevtoolWeb 图标。 3. 进入“请求头”“模拟响应”“站点提示”或“重定向”，新增一条配置。 4. 填写对应内容：请求头名称和值、Mock 方法与响应数据、提示匹配规则，或重定向目标地址。 5. 请求头、Mock 和 URL 重定向在需要调试的标签中按需启用；站点提示全局启用后按 URL 规则显示。重新发起请求或访问目标页面，检查实际效果。 6. 将确认可用的配置补充名称或描述；Mock 可进一步整理到分组中，方便下一次使用。 首次体验可以从一个小目标开始：给常用请求增加一条业务标记，为列表接口准备一份空数据，或者为测试站点加上环境提示。先完成一条配置，再逐步整理成自己的调试工具集。 想体验按标签页开启的便利，可以打开同一个网站的两个标签，只在其中一个启用请求头配置、Mock 或 URL 重定向，然后分别发起请求，观察调试标签与正常标签的结果。 💡 常见配置问题 URL 的填写方式 Mock 使用 URL 过滤条件匹配请求；重定向的“目标URL”和站点提示的“正则”用于填写相应的正则表达式。不同功能的匹配方式有区别，建议先从明确的域名或路径开始配置，再验证匹配结果。 捕获组与反斜杠 重定向地址中的 \1、\2 分别引用正则里的第一个、第二个捕获组。在插件输入框中，反斜杠只写一次；写入 JSON 字符串时则需要按 JSON 规则转义。例如，输入框中的 \1 在 JSON 字符串中写为 \\1。 路径与查询参数 是否保留原路径和参数，由匹配表达式与重定向地址共同决定。上面示例 1 和示例 2 的 \1 已包含开头的 /，目标域名或端口后无需再补一个 /。保留整段查询字符串时，原参数顺序和 URL 编码也会一起保留。 本地地址与重新验证 重定向到 localhost 前，先确认本地服务已启动且目标路径可访问。修改请求头、Mock 或重定向后，需要重新发起请求或访问目标页面，才能检查本次配置的效果。 多条配置同时使用 首次配置建议先验证一条，再逐步加入其他规则。对于匹配范围相同或重叠的 Mock、重定向配置，按当前场景管理开关，方便判断具体是哪条配置影响了结果。 让常用调试配置随手可用。添加 LxDevtoolWeb，从一个标签开始调试，再打开另一个标签对照真实结果，体验按标签页开启带来的便利。也可以从下一次接口联调、本地调试或环境识别开始，逐步积累适合自己的配置。 📮 联系我们 使用过程中遇到问题，或有功能建议、体验反馈，欢迎通过以下任一邮箱联系： lx.web@qq.com lx66159588@gmail.com 反馈时可说明相关功能、操作步骤和预期效果，便于了解问题与使用场景。