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

最新推荐文章于 2024-08-20 17:12:52 发布
最新推荐文章于 2024-08-20 17:12:52 发布
阅读量8.3k 收藏 8
点赞数 3
分类专栏： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43623808/article/details/103275133
版权

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

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

温柔先生
关注
专栏目录
Web开发中Chrome DevTools攻略（深入理解和利用开发者工具、元素面板和控制台、网络和资源面板、应用和源代码面板等等）
半夏微凉科技
05-17 735
Chrome开发者工具（DevTools）是Web开发中不可或缺的利器，它提供了一系列强大的功能，帮助开发人员调试、优化和审查网页。本文将深入探讨Chrome DevTools的各种功能和技巧，帮助你更好地利用这个工具来提升你的Web开发技能。
【浏览器】浏览器控制台 Mock 响应数据，更改页面显示内容
Hemri2580的博客
12-12 1807
有时候后台返回的数据可能不是想要的数据或缺失想要的字段，这个时候就可以直接操作浏览器的控制台 netWork 选项，进行数据的模拟。比如改写下图中的数据内容。
chrome 使用本地替换功能修改接口返回的数据并显示在前端页面
最新发布
m0_46582389的博客
08-20 288
3、CTRL+R刷新页面，重新请求接口，页面加载，请求接口有标识，完成。2、源代码修改接口返回参数，修改完CTRL+S保存。1、替代内容，本地选择文件夹，允许权限。
浏览器控制台调试json数据
weixin_34185560的博客
10-20 1583
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 740
要了解有关此功能的更多信息，请访问。
Chrome 控制台 performance 性能分析
When you can't win by being better, you can win by being different.
06-20 2938
（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。
浏览器修改接口返回数据展示在页面上
qq_41154522的博客
03-07 1380
前端自己调试，想修改接口返回来的数据，然后展示在页面上。
Cocos Creator 的 Chrome 控制台调试高阶指南！功能与使用方法详解
Cocos的博客
02-22 694
Chrome 控制台是很多开发者的必备工具之一，但你真的掌握了它的精髓吗？是否还是全靠 console.log() 排查问题？其实，控制台的功能远比这更强大，用好控制台，能帮助我们更加准确高效地发现问题、定位问题，让 bug 无所遁形。今天就同大家分享一下我自己常用的Chrome 控制台调试功能及使用方法，希望能帮助大家的 Cocos Creator 项目在 Chrome 控制台更好地进行调试。...
用Python驱动Headless Chrome
BRAVE MAN的博客
11-30 1629
Headless Browser(无头的浏览器)是什么鬼? 简而言之，Headless Browser是没有图形用户界面(GUI)的web浏览器，通常是通过编程或命令行界面来控制的。 Headless Browser的许多用处之一是自动化可用性测试或测试浏览器交互。如果您正在尝试检查页面在不同的浏览器中呈现的方式，或者确认页面元素在用户启动某个工作流之后出现，那么使用Headless ...
小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug
06-05 1383
突然有一个海外用户反馈问题，说有一个页面点击新增按钮就白屏。对方不会说中文，所以全程英文交流，用上了我抠脚的6级哑巴英语，沟通过程稍微麻烦一点。一开始听到白屏，心里还是毫无波动的，这种问题呢，无非就是某个接口数据返回不太科学，然后前端没有容错。只需要看见报错信息必然可以秒解决 前排提示，现在掘金发文的时候有违禁词会发不出去。所以花了半小时发文章，反复使用二分法排除定位违禁词语，能发出去说明前面内容没问题，然后再加一点内容继续试。我还在发文章的时候，就看见200浏览了，给200个小伙伴道歉，那时候还在试敏.
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
热门推荐
dvlinker的技术专栏
12-03 2万+
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
利用Chrome查看SQLite数据库数据
lixinxiaos的博客
08-28 5452
Android系统的安全性越来越高，项目中开发有时候会用到SQLite，但是SQLite的查看方式却越来越麻烦。这次就提供一个好用的数据库查看方式。 1、首先。需要电脑上装有Chrome浏览器。 2、然后在项目中添加依赖： implementation 'com.facebook.stetho:stetho:1.4.2' 3、在Application的onCreate中做好初始化： public...
(十五)在controller之外修改$scope中的数据，双向绑定特性失效，不能自动刷新
aty
04-17 4737
在angularjs中通过angular.element(dom).scope()可以拿到某个dom元素关联的作用域，从而可以访问$scope中的属性和方法。但是在ng-controller函数之外修改$scope中的数据，angular的$scope是不会自动刷新的，即双向绑定特性失效。 var app = angular.module('app', []
比fiddler简单，浏览器端的拦截方案，请求参数篡改，响应返回值篡改，请求和响应的拦截注入，请求前的二次确认
qq_29456953的博客
10-15 5542
1. 查询加参数了，依赖前端写完界面测试？或者维护postman之类的工具，有点难受。 2. 有些值依赖前一个请求，比如查看列表，然后查看详情，用postman费劲。 3. 产品或者测试压根不熟悉postman 4. ...
使用chrome浏览器修改当前网页内容
Winfredzhang的博客
12-04 2万+
1、进入浏览器，打开需要修改的网页，按F12按钮。 2、点击图标。 3、修改内容。 4、关闭调试窗体。
Chrome Network 修改接口返回数据
测试入坑之路
01-02 2499
前端开发在调试过程中，经常需要各种不同的数据来反复调试，所以我们前端程序员会经常在脚手架中集成 mock 或者通过代理的方式去hack的实现，但是现在再也不用这么麻烦了，Chrome 117 原生就支持了，而且体验相当丝滑。这时候浏览器会提示：选择要用来存储替换文件的文件夹，这个文件夹主要作用是用来保存 Mock 的替换文件，方便下次 Mock 请求直接使用。重新发起请求，发现被拦截的接口会有一个高亮的标识，鼠标移入会提示对应的信息，并且响应的数据已经变成了我们修改后的数据。
js监听页面请求
captAction的博客
11-27 5154
代码封装 //监听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
chrome 使用本地替换功能替换接口返回内容
lyhDream的专栏
06-19 1870
在web开发或测试过程中，我们经常会需要修改接口返回值来模拟数据进行开发或测试。常用的方式一般通过抓包工具，如charles，或fildder 的功能。例如我们可以使用charles打断点的方式，或者使用charles的map local 功能进行本地替换。本文介绍不通过代理或抓包的方式，在浏览器中进行请求内容的替换。
浏览器控制台执行代码_chrome浏览器中 F12 功能的简单介绍
weixin_39606799的博客
11-24 5199
首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。源代码（Sourc...
chrome控制台模拟按键
08-11
回答: 在Chrome控制台中模拟按键事件可以使用JavaScript的KeyboardEvent对象来实现。您可以创建一个KeyboardEvent对象，设置相关属性，然后使用dispatchEvent方法触发事件。例如，您可以使用以下代码在控制台中模拟按下Enter键： ``` var event = new KeyboardEvent('keydown', { key: 'Enter' }); document.dispatchEvent(event); ``` 这段代码会在当前页面中触发一个模拟按下Enter键的事件。您也可以根据需要修改key属性的值来模拟其他按键。请注意，此方法在最新的Chrome浏览器中仍然有效，但是一些过时的方法（如UIEvent.initUIEvent和KeyboardEvent.initKeyEvent）已经被废弃，推荐使用最新标准的KeyboardEvent实现。123 #### 引用[.reference_title] - *1* *2* [Chrome 控制台 JavaScript 模拟键盘事件输入 最新有效](https://blog.csdn.net/tonglingtou1875/article/details/117160048)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *3* [chrome浏览器控制台创建js脚本并执行](https://blog.csdn.net/weixin_42363510/article/details/111990520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值