首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

    本地调试 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 之类的,那就去捣鼓吧。

    27950

    PhpStorm本地断点调试

    前言: php代码在调试时,经常是print_r或者var_dump来断点,但是当项目较为复杂的情况下,这么做效率就非常低下了,断点调试就非常好的解决了这个问题。...一开始可能不太适应断点调试,但是当习惯之后,越用越舒服。...注:以下是在windows7+apache环境 一、断点调试php环境搭建 1、检测本地php环境是否安装了Xdebug 在本地输出phpinfo();搜索Xdebug;如下图 如果没有安装,安装操作...二、开始你的断点调试 1、在你安装已Xdebug扩展的浏览器中,打开你本地项目的某一个页面。并开启浏览器右上角的debug,如下图。...4、当你由于断点调试,在多处断点,并且打开了多个文件,想查看你在那些地方断点,可以按Ctrl+Shift+F8 浏览断点 5、断点调试还有很多小技巧,你可以在使用中慢慢发现摸索。

    3.6K30

    调试JS代码

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

    19K10

    Fiddler远程调试js

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

    10K30

    本地调试微信接口方法

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

    23410

    用Telepresence在本地调试Kubernetes服务

    使用Telepresence在本地调试服务 假设您有一个在临时集群中运行的服务,并且有人报告了针对它的bug。...为了找出您想要在本地运行服务的问题......但是服务依赖于集群中的其他服务,也许还依赖于像数据库这样的云资源。 在本教程中,您将了解Telepresence如何允许您在本地调试服务。...我们将使用telepresence命令行工具把在临时集群中运行的版本换成在本地计算机上运行的由你控制的调试版本。然后,Telepresence将把来自Kubernetes的流量转发到本地进程。...此时,您想要切换到本地开发服务,将集群上运行的版本替换为笔记本上运行的自定义版本。...这使您可以通过在本地运行代码轻松调试问题,同时仍然允许本地进程完全访问您的临时或测试集群。

    3.1K20

    前端资源 "本地覆盖" 调试

    打包的 js 文件是否漏了添加某个提示?等等... 哦,这还不简单~ 重新本地运行测试,再进行打包,最后部署......可以的,本文,我们就来讲讲如何进行 本地覆盖 调试。...⚠️注意:如果读者是使用 safari 浏览器去调试,是可以重写请求头的 案例 下面,我们简单以三个案例来实践一下: 更改接口请求头 我们还是以掘金我的文章列表接口为例,我们出触发 Override...但是,我们这么不幸运碰到了个 bug,那么,我们怎么快速验证本地修改之后,线上项目是能够正常运行的呢?...是的,我们可以将本地的构建包 dist 资源替换为线上的引用资源,那么,我们就知道是否本地修改后的代码在现在运行的情况。 我们还是以 掘金 平台为案例。

    49030
    领券