首页
学习
活动
专区
圈层
工具
发布

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

断点调试么? 但是这时候代码是被压缩过的,变量名都是 a、b、c、d 这种,根本看不出啥来。 如果调试线上报错能像本地开发的时候一样就好了。...其实这是可以做到的,今天就分享下如何优雅的调试线上报错: 首先,我们准备一段 JS 代码: 这是我随便找的一段 JS 代码,里面抛了一个错误。...关联 sourcemap 需要在文件末尾加上 //# sourceMappingURL=xxx.js.map 的代码。 但现在这个文件是线上的,不能直接改本地文件。...,可以通过作用域、调用栈等信息来定位报错原因: 这样我们就完成了直接本地调试线上报错代码对应的源码!...案例代码在:https://github.com/QuarkGluonPlasma/fe-debug-exercize 总结 通过 sourcemap,我们可以调试线上报错的时候直接对应到本地源码来断点调试

2.2K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    本地调试 https

    前端开发,正常情况是不需要用到 https,免不了一些比较特殊的功能需要 https 才能调试,之前做的拍照扫码之类的,要用到摄像头,电脑 localhost 可以直接用,想用手机去测试就得 https...basicSsl from '@vitejs/plugin-basic-ssl' export default { plugins: [ basicSsl() ] } 除了自带的会很方便调试...,其他就得自己本地安装证书了,用 OpenSSL 之类的,按照文档一步一步下来应该也能实现,只不够对于小模块功能调试,最理想的还是能快速启动,而不是还需要生成配置之类的。...--files "index.html" //代理其他server成https browser-sync start --https --proxy "192.168.199.88:8080" 其实调试时候的证书...当然,如果想要学习了解本地怎么安装证书怎么启动 https 之类的,那就去捣鼓吧。

    64950

    调试JS代码

    记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...,方便调试 Console....查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network.

    23.7K10

    Fiddler远程调试js

    使用Fiddler调试本地js   在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。...不是200也没关系,你只要本地硬盘上有这个文件就好了。 第二步:将js文件保存到本地(如果本地已经有这个文件,可以跳过这步) ?   ...在这个js session上右键点击,选择“Save – Response –Response Body…”,将js文件的内容保存到本地。记住存的位置,下面我们会用到这个保存下来的文件。...第五步:修改本地文件,进行测试   我们在本地的js文件中加一句alert(‘hello’) ? 刷新浏览器,看看效果,如果alert出来,那就成功了。   ...通过以上几个步骤,我们演示了怎样将HTTP请求重定向到本地的文件,进行web调试。

    11.5K30

    aList – 私有网盘 – 本地网盘

    本页目录 Toggle aList介绍 访问web界面 配置百度网盘 配置WebDAV aList介绍 使用简单:AList 从一开始就设计为易于安装,并可在所有平台使用。...多种存储:AList 支持多种存储提供商(含本地存储、百度网盘、阿里云盘、OneDrive、Google Drive 等),扩展空间大。...- UMASK=022 restart: unless-stopped 访问web界面 访问 http://127.0.0.1:5244 账号:admin 密码去找日志 配置百度网盘...查询自己的百度网盘令牌: https://alistgo.com/zh/guide/drivers/baidu.html#%E5%88%B7%E6%96%B0%E4%BB%A4%E7%89%8C 跳转后..."根文件夹路径":是你网盘的路径。 "挂载路径":是你aList页面显示的路径,与网盘无关。 注意:修改了 "根文件夹路径" 不生效,需要你修改下 "挂载路径"。

    1.2K10

    本地调试微信接口方法

    调试微信接口,例如调试微信消息收发接口,我们需要提供一个公网访问url,正常情况下,我们需要建立web工程,然后打包,不部署服务器,提供服务器外网访问url。...但是想要将自己本地电脑上运行的项目发布到公网,让所有人都可以访问,显然是很麻烦的一件事情。...这里介绍三种方式,将本地运行代码发布到互联网,提供映射域名,实现本地调试微信接口: 1、使用ngrok:详见http://blog.csdn.net/liuxiyangyang/article/details...(由于ngrok每次映射的公网域名都是随机的,这样每次重启都会发生变化,给本地调试造成麻烦,所以需要这个授权码,使我们的域名固定) 第二步:打开cmd窗口,进入ngrok目录,输入ngrok 80,就可以得到本机

    1.4K10

    使用Firefox轻松调试JS

    Firefox调试JS的功能真的很不错,推荐一下! 在页面上点击右键,再点击“查看元素”,如图: ? 就会弹出Firefox的开发者界面,点击“调试器”,如图: ?...一步步调试代码 你可以一步步的执行代码。这对代码调试非常有用。 ? 使用断点调试 断点调试可以终止代码的执行,你可以通过指定代码范围来查看错误是不是在指定代码范围内。这对于 错误调试很有用。...Firefox的JS调试功能非常强大,感觉试一下吧! 点击调试器tab页,刷新要调试的页面,调试器主窗口会出现要调试的代码 ?...点击暂停按钮,点击后按钮状态改变,同时右边的三个调试步骤变为可操作状态,调试步骤的作用可参考IE浏览器javascript调试篇的讲解。同时,在代码行上面打断点。...说到这里,Firefox浏览器的javascript调试基本就讲完了。

    7.5K20

    IDEA中Debug调试VUE前端项目、调试JS

    序号1、输入jsdebug启动项目的名称 序号2、复制前端项目浏览地址到这里,这里需要说明下,jsdebug并不是帮你启动了一个前端项目,前端项目该怎么启动还怎么启动 序号3、选择一个你本地安装好的浏览器...会帮你在新的浏览器窗口里打开刚刚设置的URL地址,现在你可以在这个新打开的窗口里操作,当遇到你打断点的代码,IDEA的断点就会激活,这个时候就可以愉快的Debug起来了,效果如下图: 结语 IDEA的这个前端调试工具非常好用...,却没有得到很好的普及,网上搜到的那种方式大多是安装一个IDEA的浏览器插件配合使用,相比来说,博主发现的这个调试工具简直太好用了,而且注意哦,此法不仅可以调试VUE的项目,而是适合所有的前端项目

    9.2K20

    调试 node.js 程序

    调试 node.js 程序 在程序开发中,如何快速的查找定位问题是一项非常重要的基本功。在实际开发过程中,或多或少都会遇到程序出现问题导致无法正常运行的情况,因此,调试代码就变成了一项无法避免的工作。...这里简单介绍下如何调试 node.js 程序。 使用 console.log Node 提供了全局的 console 对象,该对象可以输出格式化的字符串。...Node 调试程序: node --inspect index.js 这样就会以调试模式启动 Node,可以看到调试器的提示信息如下: Debugger listening on ws://127.0.0.1...可以通过命令在程序第一行设置断点: node --inspect-brk index.js 调试器提示信息如下: Debugger listening on ws://127.0.0.1:9229/def735ed...链接就可以进入浏览器调试面板调试程序了。

    4K20

    加密JS代码反调试

    JavaScript奇技淫巧:加密JS代码反调试 JS代码混淆加密,已被很多人使用,因为它真的很有用、很实用,可以用于保护代码、防护分析、复制、盗用,还可以用于小游戏过审、APP加固等方面。...混淆加密后的JS代码,可能被他人分析,为了对抗分析调试,本文分享一种反调试技术。 功能效果 使函数名不可修改,修改则代码无法运行 技术原理 将JS代码用可逆算法进行加密。...在分析调试时,分析者经常会将无意义的函数名改成有含义的名字,使便于理解。 本文我们要做的,就是禁止改名,如果修改函数名,函数就无法执行。...map(function(c,i,a){ return String.fromCharCode(c^random_key(key,i)); }).join(""); } var js_code...Date().getFullYear() + "," + _0xbc99c; console.log(_0x7d68de); ` function _0xag(){ var decode_js_code

    7.2K50
    领券