Chrome DevTools的模拟数据调试和工作区调试方法
起因是公司的项目页面里面，有一个列表信息显示错误，在线和离线的显示跟实际的匹配不一致，想确认一下是请求问题还是页面判断问题，But 又不想打开项目调试，想着记得chrome某次更新版本的内容里面有mock调试功能的，捞起来看看。
在本地替换 Web 内容和 HTTP 响应标头
在Chrome DevTools的官方教程里面叫这个名称
开始前的提示：
- 新建一个空目录(也可以选择跳过，直接选择一个现有的目录)
- 关于权限的提示，全部选择允许
原理：
根据线上的请求地址和数据结构，同步在本地生成一份，发生请求的时候，直接请求本地的那一份数据。
秋野私认为的可以使用的场景
- 跟我需求用到的场景一样，调试一个在线网站或者一个生产环境的项目时，直接修改数据进行调试。
- 很多前端路由的项目，替换后端返回的路由菜单，如果接口权限没有控制的话，那你就可以访问到看不到的菜单了。
- 写文档或者标书的时候，需要定制一些页面数据，就不用截图再去P图了。
用乐橙云处理一个示例
打开网页链接地址，找到需要修改的请求。
查看确认一下数据是否正确
右击请求地址，选择替换内容
这时候在调试框上面会出现一个小小的提示，选择一个本地文件夹。
允许文件夹的权限，然后在选择的文件夹里面就会生成一个本地目录文件。
重新查看请求地址，启用了本地替换的请求会显示一个紫色的小标记。
修改一下本地的数据，重新刷新页面，页面的渲染效果就使用了本地的数据。
关闭的时候，直接把启用的勾去掉或者右键删除就行了
顺带摸索一下“工作区”功能
我们日常在devTools里面调试页面的时候，重新刷新页面了，那刚刚调试的数据就没有了。
工作区的概念，就是可以让你直接在浏览器里修改你项目里面的文件，并实时预览。
撸一个示例
create一个react的初始化项目
pnpm create vite demo
把项目添加到工作区，注意权限提示！
然后啥也不用管，直接build出来。用http-server启动dist目录
打开devtools的源代码-工作区。会看到dist里面文件有绿色的小标记。
pnpm build
http-server ./dist/
切换到元素，选择class=card的div，在工具里面给其设置上红色背景，注意此时css属性右侧的引用文件上也有绿色小标记。
操作完之后，刷新页面看看，是不是红色的背景属性依然存在。
此时可以大声的给产品喊：来，你想改啥颜色，你自己选择！
假设一个打包好的项目，没有源代码了，我们需要调整其内容怎么办呢，css和页面的调整，可以用刚刚上面的方法，JS行不行呢？
基于刚刚修改的状态，重新选择元素buttun，在DOM树一层层选或者直接右键定位元素都可。
$0 // 获取元素
document.querySelector("button") // 或者这样都可
// 然后.属性提示选择reactProps
打开控制台，键入命令获取当前元素
点击打印出来的事件，跳转到源代码工作区
修改他，然后刷新界面。再次点击按钮。NICE
上面是基于一个打包后的代码的调整修改操作，如果只是小改动，比之前我弄的反偏译那个方法方便多了。
当然要是基于开发模式，刚刚的工作区一样适用，只是没有好象必要。
