文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

如何让调试线上 JS 报错像调试本地源码一样优雅？

首先，我们可以使用异常断点，在抛异常的地方断住： 创建一个 vscode 调试配置： 勾选 uncaught exceptions，在未被捕获的异常处断住： 然后启动调试： 你会发现代码在抛异常的地方断住了...我们可以使用 charles 的断点功能来修改它： charles 默认不代理 127.0.0.1 的请求，我们要配下 hosts： 比如我配了一个 www.guangtest.com 的域名到 127.0.0.1...chrome 应用商店搜索 switchy omega： 配置下代理服务器，这里我 charles 是在 127.0.0.1:8888 的： 之后配下 auto switch，让 www.guangtest.com...的请求都走我们刚刚配的代理： 之后点击应用选项。...代理方式设置成 auto switch，也就是根据配置的规则自动切换代理： 这个网页的代理配成 charles 之后，在 charles 就可以抓到对应的请求了： 接下来就是断点修改响应的内容了：

2.2K30

学会前端调试技巧，提升排错效率

一、Bug 与 Debug我们系统程序的漏洞就叫 bug。世界上第一个 bug ，是 1946 年霍普发现了第一个电脑上的 bug，竟然是一只飞蛾“臭虫”。...使用关键字 debugger 或 代码 预览区域的行号可以设置断点执行到断点处时代码暂停执行展开 Breakpoints 列表可以查 看断点列表，勾选/取消可以 激活/禁用对应断点暂停状态下，鼠标 hover...) iPhone 使用 Safari 浏览器打开要调试的页面 Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面) 在弹出的 Safari...Developer Tools 中调试 没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器 iPhone 使用 USB 数据线将手机与电脑相连...Overrides、Charles 配置 Map Local移动端问题排查：使用代理抓包工具（Charles、Fiddler...）隐藏深的问题排查：小黄鸭调试大法（一行行挨着读代码，梳理清楚代码逻辑

2.9K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    利用Charles开发调试技巧总结

    @csxiaoyao.com QQ: 1724338257 使用macOS开发，青花瓷Charles是必不可少的，如同Windows的Fiddler一般，熟悉下面的几点Charles技巧将会令调试事半功倍...操作方式： 选中接口，右键选择 Save Response，然后保存为到本地文件(例如json文件) 编辑文件，然后选中接口，右键选择 Map Local 修改 map 的路径为本地文件路径 若想快速修改本地映射...模拟网速 在开发调试过程中，经常需要测试接口在不同网速下的结果，Charles 可以方便地模拟网速。...断点调试 Charles 可以对每次请求的 request 和 response 进行断点调试。...操作方式： 选中接口，右键选择Breakpoints打断点开启断点调试 当请求调试的接口时，Charles 会先跳转到编辑请求，修改完后点击执行后，会跳转到编辑响应，修改完后点击执行，完成调试 7.

    1.1K30

    利用Charles开发调试技巧总结

    操作方式： 选中接口，右键选择 Save Response，然后保存为到本地文件(例如json文件) 编辑文件，然后选中接口，右键选择 Map Local 修改 map 的路径为本地文件路径 若想快速修改本地映射...模拟网速 在开发调试过程中，经常需要测试接口在不同网速下的结果，Charles 可以方便地模拟网速。...操作方式： Proxy -> Throttle Settings 进入Throttle设置 选择网络环境 可以点击面板上的小乌龟(Start Throttling)按钮切换开关Throttle 配置含义...断点调试 Charles 可以对每次请求的 request 和 response 进行断点调试。...操作方式： 选中接口，右键选择Breakpoints打断点开启断点调试 当请求调试的接口时，Charles 会先跳转到编辑请求，修改完后点击执行后，会跳转到编辑响应，修改完后点击执行，完成调试 7.

    2.7K65

    前端必须知道的开发调试知识 - 笔记

    ; 最后还有一个比较少用的方法，用于展示 HTML 节点的 DOM 对象： console.dir # Sources— 源码 调试器使用： 使用关键字 debugger 或代码预览区域的行号可以设置断点...执行到断点处时代码暂停执行 展开 Breakpoints 列表可以查看断点列表，勾选 / 取消可以激活 / 禁用对应断点 暂停状态下，鼠标 hover 变量可以查看变量的值 在调试器 Watch 右侧点击...→选择调试页面) 在弹出的 Safari Developer Tools 中调试 Tips：没有 iPhone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的 ios...查看电脑 IP 和端口 将 IP、端口号填入手机 HTTP 代理 Charles 允许授权 使用 SwitchHosts!...软件给 Mac 电脑配 Hosts 手机访问开发环境页面 常用工具： Charles：适合查看、控制网络请求、分析数据 Fiddler：与 Charles 类似，适合 Windows 平台 spy-debugger

    1.9K20

    最全的 Charles 抓包工具详解「建议收藏」

    基本上HTTP能修改的东西，Charles都能帮我们修改 所以当我们接口在Mock阶段时我们可以通过Charles设置我们本地的JSON数据，加速我们的开发 而且还能模拟弱网环境，帮助我们调试网络极端情况的用户体验...抓包 HTTPS Android7.0及以上系统中HTTPS抓包 使用Charles模拟慢网速 Breakpoints断点功能 Compose功能修改Request Rewrite重写功能 Map映射功能...因为处于安全的考虑，Android7.0及以上，系统默认只会信任系统(System)级别的证书 不再信任用户添加的证书(User)，也就是说上面我们在设备上安装的 Charles 根证书，系统不再信任...使用Charles模拟慢网速 可以在 Proxy -> Throttle Settings 设置网络速度，还可以自定义带宽(Bandwidth)： 5....Breakpoints断点功能 可以使用Charles在某个网络请求的时候进行断点， 这样可以精确的定位某个网络请求： 除了上面的手动添加需要断点的URL，如果这个URL已经请求过，可以对该请求单击右键

    18K33

    Charles实战秘籍：弱网模拟、Map LocalRemote、HTTPS抓包详解

    ：使用*匹配任意字符正则表达式匹配：最灵活的匹配方式，可以匹配复杂模式实战示例：模拟各种接口状态假设我们需要测试一个用户接口的各种返回状态：正常情况：返回完整的用户数据空数据：返回空数组或空对象异常情况...配置SSL代理设置在Charles中，选择"Proxy" -> "SSL Proxying Settings"：启用"Enable SSL Proxying"添加需要抓包的域名和端口（如*:443匹配所有...Charles中配置客户端证书安全与隐私考虑使用HTTPS抓包时需要注意：合法使用：仅对自己的应用或获得授权的应用进行抓包敏感信息：抓包可能暴露密码、令牌等敏感信息，确保在安全环境中操作数据保护：及时清理抓包数据...，避免敏感信息泄露六、综合实战：Charles在真实项目中的应用案例一：电商应用网络优化通过Charles分析发现，某电商应用首页加载缓慢：使用弱网模拟发现图片加载策略不佳通过Map Local模拟各种网络条件下的用户体验使用...断点调试（Breakpoints）断点功能允许我们拦截特定请求，在请求发送前或响应返回后修改其内容：在需要拦截的请求上右键选择"Breakpoints"触发请求后Charles会自动暂停请求编辑请求参数或响应内容执行修改后的请求或响应

    2.8K10

    《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试

    1.简介   Charles和Fiddler一样也有个强大的功能，可以修改发送到服务器的数据包，但是修改前需要拦截，即设置断点。设置断点后，开始拦截接下来所有网页，直到取消断点。...2.Charles设置断点 Charles设置断点的具体操作步骤如下： 2.1方法一 1.启动Charles后，点击Proxy -> Breakpoint Settings... ...、ip(192.168.18.3）访问接口 3.4.2运行结果  3.4.3浏览器访问接口 在浏览器输入相应网址后显示如下图所示： 4.Charles断点实战 4.1测试接口 1.上边的本地接口：GET...如下图所示： 4.2Charles设置断点 4.2.1请求数据打断点 1.按照前边的步骤进行请求的断点设置，在发送请求时，进行请求的断点拦截，将1801修改成1802，预期响应结果为返回：李四的账户信息...4.2.2响应数据打断点 1.按照前边的步骤进行响应的断点设置，在接到服务器的响应之后，进行响应的断点拦截，将响应结果：张三 修改成 北京-宏哥，预期响应结果为返回：北京-宏哥 的账户信息。

    6.1K53

    Charles设置断点篡改接口的返回值配置详细步骤

    拦截并篡改接口返回值完整操作 重新在浏览器 / 项目刷新访问目标接口，会自动被 Charles 断点拦截，卡在断点页面 切换到右侧 Response 标签 → 再切换 Text 子标签，这里就是接口原始返回数据...打开 Windows 设置 → 网络和 Internet → 代理 把所有开关全部关掉： 自动检测设置：关闭 使用安装脚本：关闭 使用代理服务器：关闭（如果是开着的，点「编辑」，把地址和端口全清空，再关闭...在左侧目录树里，找到： 受信任的根证书颁发机构 → 证书 在右侧列表里，按名称排序，找到 Charles Proxy CA 开头的证书（你安装的那个，有效期 2026/5/14 - 2027/5/14...切换到 「详细信息」 标签页，点击下方的 「证书路径」。 选中最上面的 Charles Proxy CA 证书 → 点击「查看证书」。...管理设备证书」 同样在「受信任的根证书颁发机构」里，找到 Charles Proxy CA 并删除。

    80300

    实用 | 盘点抓包修改响应结果的 2 种方式！

    作为代理，所以能正常抓取浏览器的数据包 1-2 抓包并对目标接口开启断点 正常利用 Charles 进行抓包，选中目标接口（以登录接口为例），右键开启断点 1-3 再次调用接口，修改响应值...再次抓取到登录接口时，Charles 会在请求、响应时断点展示，我们可以对「 请求头、请求体、响应头、响应体 」进行二次编辑 在编辑窗口修改响应结果后，点击右下角的「 Execute 」按钮就可以将修改后的结果返回给前端进行渲染...Map Local Settings 第一种方式虽然操作简单，但是如果接口设置的超时时间很短，在断点窗口中修改响应结果不一定来得及 Map Local Settings 相当于将本地文件数据作为响应值进行返回...具体操作步骤如下： 2-1 正常抓包并保存响应值并进行二次编辑 使用 Charles 正常抓包，右键选择登录接口将响应数据以 JSON 格式保存到本地，然后对响应结果文件进行二次编辑 2-2 查看同接口...（具体配置参考2.3） 2-3 Rewrite Settings（可选） 操作路径：Tools - Rewrite - Enable Rewrite 点击 Add 按钮，在右侧编辑区域添加对应的 Location

    2.3K20

    《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(3)-再识Charles

    1.简介 上一篇通过宏哥的介绍想必各位小伙伴或者童鞋们对Charles已经有了一个理性地认识，今天宏哥在从Charles的外貌介绍和分享一下，让小伙伴们或者童鞋们再对Charles有一个感性的认识，今天主要是对...【六边形】图形按钮：灰色时表示断点未开启，红色时表示正在使用断点 【笔】图形按钮：编辑修改请求，点击后可以修改请求的内容。...指定服务器上的文件路径来定位特指的资源。...URL——请求url的路径、文件和查询字符串 Status——状态是否已完成 Response Code——响应状态码 Protocol——该seesion使用的协议（Http/https/ftp...开发COM组件时，可以在COM组件对应的CLSID子键下 新建字符串类型的项，名称：AppID，值：该COM组件所在进程的AppID值。

    4.7K43

    Charles基本使用

    Charles安装后默认是试用版本,有效期30天,需要注册激活码. 工具视图 在顶部导航是基本设置、代理设置、工具、帮助等. 中间位置是请求的接口名字、请求内容、响应内容等....使用手机浏览器输入 http://charlesproxy.com/getssl 或者 chls.pro/ssl 需要在手机上设置密码才能安装 在Android个别rom上,通过手机浏览器下载后不让安装...手动开启路径:设置->通用->关于本地->证书信任设置->勾选证书 charles设置443端口,proxy->ssl proxy setting 基本使用 查看请求 使用本地数据(Map Local...,这个时候接口是在Charles代理层被拦截,还没有实际到手机设备上....如果修改数据的时间太久,客户端会展示错误页面,那么做断点调试就没有意义了.

    1.4K30

    app抓包工具charles安装使用教程

    前言 网上有很多该工具的使用教程，这里结合个人的安装使用重新整理一份分享环境 PC端：windows 10 手机端：小米 K40 charles官网：https://www.charlesproxy.com...wifi，找到该wifi的高级设置，代理选择手动，代理服务器主机名填charles所在电脑的IP，可通过Help -> SSL Proxying -> Install Charles Root Certificate...“Allow”再刷新手机浏览器会自动弹出下载证书提示然后在手机的 设置 > 安全 > 更多安全设置 > 更多安全设置 > 加密与凭据 > 安装证书 > CA证书 安装刚才下载的证书（注意：每个手机厂商这个路径不一样...，我们客户在“设置”的首页搜索CA，能直接搜到对应路径）设置防火墙允许的应用，手机即可通过Charles代理上网（如果没有找到就先把防火墙关了，抓包完成再打开）以上都操作完毕就可以进行简单的使用了，使用界面常用按钮...SSL Proxying【乌龟】图形按钮：灰色时表示网速设置正常，绿色时表示开启慢速网络【六边形】图形按钮：灰色时表示断点未开启，红色时表示正在使用断点【笔】图形按钮：编辑修改请求，点击后可以修改请求的内容

    24.6K33

    mac使用Charles抓包安卓app环境搭建

    然而对于一个app而言，类似的做法就是使用抓包工具定位url。废话不多说，直接实操起来。...从上面地址下载好后，有30天的免费试用时间，免费使用需要经常重启服务。...然后点击add，输入*通配符，通配所有的url请求 手机WiFi设置 通过上面的设置已经成功的开启了一个172.26.203.178:8888的代理服务。然后需要在手机上配置下。...由于没有安卓机设配，所以需要先下载安装一个安卓模拟器（有安卓手机的跳过） 安卓模拟器 下载地址：https://mumu.163.com/mac/index.html 安装好后，模拟器内置的应用商店找不到...https证书的设置步骤 使用 都配置好后，打开模拟器中安装好的app，首次拦截到app流量，Charles会弹出一个是否许可的弹窗，允许所有即可，然后就可以愉快的探索app中的秘密了

    2.3K50

    《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(10)-Charles如何修改请求参数和响应数据-下篇

    2.3Breakpoint（打断点） 上面提供的 Rewrite 功能最适合做批量和长期的替换，但是很多时候，我们只是想临时修改一次网络请求结果，这个时候，使用 Rewrite 功能虽然也可以达到目的，...Breakpoints 功能类似我们在 Xcode 中设置的断点一样，当指定的网络请求发生时，Charles 会截获该请求，这个时候，我们可以在 Charles 中临时修改网络请求的返回内容。...如果没有Charles，要服务器配合构造相应的数据显得会比较麻烦。这个时候，使用 Charles 相关的功能就可以满足我们的需求。...具体操作步骤如下： 1.保存接口响应：右键-->save response-->保存到本地路径(最好为json格式)备用，这里还是用自己写的API。...Breakpoints 功能类似我们在 Xcode 中设置的断点一样，当指定的网络请求发生时，Charles 会截获该请求返回数据，这个时候，我们可以在 Charles 中临时修改网络请求的返回数据。

    8.5K31

    Web开发生存工具使用指南

    如果是在生产环境上出现了问题，这时候就可以先拿Charles抓包（也就是获取接口的请求信息），在确认接口确实出现问题时，我们现在就有两种途径可以去 debug： 使用Charles设置代理，将一个远程服务器地址代理到本地服务进行调试...Charles 的安装与使用 这两个工具的安装都比较简单，但是 Charles 在配置上会稍微复杂一些，毕竟要修改一些系统层面上的东西（不然没法抓包了） Charles 是一个免费下载，但是使用收费的软件当然网上大量的...设置代理端口 设置路径 Proxy -> Proxy Setting -> Proxies 安装成功以后，首先我们要设置代理所使用的端口号，一般来说都喜欢用8888 这个端口号是用来在远程设备上连接你本机时使用的...现在就完成了在 iOS 上边的设置了，可以愉快的使用 Charles 进行抓包了。 ?...我们在要打断点的请求上右键调出菜单，然后找到 BreakPoints，点击激活。 ? 下次再访问时就会自动跳转到另一个页面进行设置。

    81530

    手把手教你如何使用Charles抓包

    一、为什么使用charles 前几天因为需要通过抓包定位问题，打开了尘封已久的fiddler，结果打开软件后什么也干不了，别说手机抓包了，打开软件什么请求也抓不到。...五、Charles过滤 通常情况下，我们需要对网络请求进行过滤，只监控向指定目录服务器上发送的请求。对于这种需求，以下几种办法： 方法一：在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。...】这是我们会发现工具栏有个六边形按钮已经变为红色 2、设置断点，点击菜单栏【proxy】勾选【Breakoint Setting …】这是会弹出断点设置弹窗； 3、在弹出的断点设置弹窗，双击想打断点的接口...，这是直接用Charles 发送一遍重复的请求就可以了，并且，重新发送请求也可以帮助我们进行功能测试； 选择需要重新发送请求的会话上，直接点击工具栏【重新按钮】 Compose编辑接口 在我们的测试工作中...选择需要修改的请求，右键选择【Compose】这时多出一个笔的请求； 十、服务器压力测试 Charles 还有一个比较有意思的功能，它能勾简单的给服务器进行压力测试；1、在进行压力测试的请求会话上右击，

    25.7K36

    利用AWS Lambda和iOS捷径实现手机一键开小区门禁

    equipmentId=xxxxxx 这个路径。 详细查看这个请求可以发现，equipmentId指的就是小区门的Id，接口使用cookie做认证，只要将cookie带上就可以模拟开门指令。...解密出来的字符并不是我们的密码，看着像是md5过的，用 echo -n xxxxxx | md5sum 把密码md5一下，对上了。看来服务端校验的是单次md5后的密码。...添加包含依赖的 Layer 代码中使用了 requests 和 cryptography 这两个第三方库，Lambda不支持使用pip直接安装这些依赖，而是需要我们在把依赖打成zip包上传成为容器的一层...由于日常使用的是Mac，所以在AWS上申请一台Ubuntu 20的EC2实例，登录实例后使用如下命令安装依赖，并打包成zip文件： mkdir python pip install -t python...cryptography pip install -t python requests zip -r python/* 在AWS上创建一个新的Layer，并将生成的python.zip上传到Layer

    3.2K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券