【黑科技之】chrome控制台查看或修改数据

最新推荐文章于 2025-04-18 08:45:46 发布
原创 最新推荐文章于 2025-04-18 08:45:46 发布
· 8.7k 阅读 · 8 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

假如检查线上项目，后台传来的数据是否正确
先F12打开控制台
点击Sources

然后找到你所要查看的js文件，在你要查看的数据变化前设置一个断点，例如我要查看返回的data：
在这里插入图片描述
需要刷新一下页面，因为页面已经加载好了，要在它加载时让它停一下，刷新页面后运行到断点
在这里插入图片描述
返回的数据就全部在scope中，可以点击查看，也可以双击修改。
就可以免了去页面中console查看数据啦
在这里插入图片描述

Web开发中Chrome DevTools攻略（深入理解和利用开发者工具、元素面板和控制台、网络和资源面板、应用和源代码面板等等）
半夏微凉科技
05-17 1313
Chrome开发者工具（DevTools）是Web开发中不可或缺的利器，它提供了一系列强大的功能，帮助开发人员调试、优化和审查网页。本文将深入探讨Chrome DevTools的各种功能和技巧，帮助你更好地利用这个工具来提升你的Web开发技能。
【Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
热门推荐
dvlinker的技术专栏
12-03 2万+
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
(十五)在controller之外修改$scope中的数据，双向绑定特性失效，不能自动刷新
aty
04-17 4777
在angularjs中通过angular.element(dom).scope()可以拿到某个dom元素关联的作用域，从而可以访问$scope中的属性和方法。但是在ng-controller函数之外修改$scope中的数据，angular的$scope是不会自动刷新的，即双向绑定特性失效。 var app = angular.module('app', []
【浏览器】浏览器控制台 Mock 响应数据，更改页面显示内容
Hemri2580的博客
12-12 2755
有时候后台返回的数据可能不是想要的数据或缺失想要的字段，这个时候就可以直接操作浏览器的控制台 netWork 选项，进行数据的模拟。比如改写下图中的数据内容。
想让网页变的可编辑，一招搞定
最新发布
右见小栈
04-18 378
帮了大忙的小技巧。专治那学不让复制的网站，惯他毛病。
浏览器控制台调试json数据
weixin_34185560的博客
10-20 1631
var str ='{"code":0,"message":"","systemTime":"2017-10-12 11:47:42","data":{"pageNum":1,"pageSize":30,"size":1,"startRow":1,"endRow":1,"total":1,"pages":1,"list":[{"id":103,"parentId":101,"deptName"...
Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试_chrome控制台如何修改indexdb的数据(1)
2401_85013211的博客
05-16 861
要了解有关此功能的更多信息，请访问。
Chrome 控制台 performance 性能分析
When you can't win by being better, you can win by being different.
06-20 5301
（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。
浏览器修改接口返回数据展示在页面上
qq_41154522的博客
03-07 2876
前端自己调试，想修改接口返回来的数据，然后展示在页面上。
Cocos Creator 的 Chrome 控制台调试高阶指南！功能与使用方法详解
Cocos的博客
02-22 904
Chrome 控制台是很多开发者的必备工具之一，但你真的掌握了它的精髓吗？是否还是全靠 console.log() 排查问题？其实，控制台的功能远比这更强大，用好控制台，能帮助我们更加准确高效地发现问题、定位问题，让 bug 无所遁形。今天就同大家分享一下我自己常用的Chrome 控制台调试功能及使用方法，希望能帮助大家的 Cocos Creator 项目在 Chrome 控制台更好地进行调试。...
用Python驱动Headless Chrome
BRAVE MAN的博客
11-30 1825
Headless Browser(无头的浏览器)是什么鬼? 简而言之，Headless Browser是没有图形用户界面(GUI)的web浏览器，通常是通过编程或命令行界面来控制的。 Headless Browser的许多用处之一是自动化可用性测试或测试浏览器交互。如果您正在尝试检查页面在不同的浏览器中呈现的方式，或者确认页面元素在用户启动某个工作流之后出现，那么使用Headless ...
小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug
06-05 1478
突然有一个海外用户反馈问题，说有一个页面点击新增按钮就白屏。对方不会说中文，所以全程英文交流，用上了我抠脚的6级哑巴英语，沟通过程稍微麻烦一点。一开始听到白屏，心里还是毫无波动的，这种问题呢，无非就是某个接口数据返回不太科学，然后前端没有容错。只需要看见报错信息必然可以秒解决 前排提示，现在掘金发文的时候有违禁词会发不出去。所以花了半小时发文章，反复使用二分法排除定位违禁词语，能发出去说明前面内容没问题，然后再加一点内容继续试。我还在发文章的时候，就看见200浏览了，给200个小伙伴道歉，那时候还在试敏.
利用Chrome查看SQLite数据库数据
lixinxiaos的博客
08-28 5665
Android系统的安全性越来越高，项目中开发有时候会用到SQLite，但是SQLite的查看方式却越来越麻烦。这次就提供一个好用的数据库查看方式。 1、首先。需要电脑上装有Chrome浏览器。 2、然后在项目中添加依赖： implementation 'com.facebook.stetho:stetho:1.4.2' 3、在Application的onCreate中做好初始化： public...
比fiddler简单，浏览器端的拦截方案，请求参数篡改，响应返回值篡改，请求和响应的拦截注入，请求前的二次确认
qq_29456953的博客
10-15 6507
1. 查询加参数了，依赖前端写完界面测试？或者维护postman之类的工具，有点难受。 2. 有些值依赖前一个请求，比如查看列表，然后查看详情，用postman费劲。 3. 产品或者测试压根不熟悉postman 4. ...
使用chrome浏览器修改当前网页内容
Winfredzhang的博客
12-04 2万+
1、进入浏览器，打开需要修改的网页，按F12按钮。 2、点击图标。 3、修改内容。 4、关闭调试窗体。
Chrome Network 修改接口返回数据
测试入坑之路
01-02 3291
前端开发在调试过程中，经常需要各种不同的数据来反复调试，所以我们前端程序员会经常在脚手架中集成 mock 或者通过代理的方式去hack的实现，但是现在再也不用这么麻烦了，Chrome 117 原生就支持了，而且体验相当丝滑。这时候浏览器会提示：选择要用来存储替换文件的文件夹，这个文件夹主要作用是用来保存 Mock 的替换文件，方便下次 Mock 请求直接使用。重新发起请求，发现被拦截的接口会有一个高亮的标识，鼠标移入会提示对应的信息，并且响应的数据已经变成了我们修改后的数据。
Chrome谷歌浏览器改变接口返回结构，进行调试
༺墨༒眉༻
02-07 748
这是一个按钮展示接口，返回1则展示返回0则隐藏，我们在不改变接口的情况下只改变返回值，来本地实现按钮展示。选择文件夹后会自动跳到Sources(源代码)，这时接口的返回结构已经缓存到文件夹了。
【工作记录】chrome 使用本地替换功能修改接口返回的数据并显示在前端页面
m0_46582389的博客
08-20 1275
3、CTRL+R刷新页面，重新请求接口，页面加载，请求接口有标识，完成。2、源代码修改接口返回参数，修改完CTRL+S保存。1、替代内容，本地选择文件夹，允许权限。
js监听页面请求
captAction的博客
11-27 5362
代码封装 //监听ajax请求 (function () { if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值