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

Js调试技巧

开发人员工具、断点技巧、搜索技巧等 视频版本:【JavaScript 代码调试方法】How To Debug In Chrome -> link # 学会使用开发人员工具 ---- preserve...、结尾、return 处,遇到平坦流(for+switch)在 case+return 处下断 学会编辑断点条件(false -> 跳过该断点),切换断点禁用 # 搜索关键字技巧 ---- 一些常见加密方式...以上 3 种都是 16 进制) 0-9 A-F base64 A-Z a-z 0-9 + _ = # 快速定位(无混淆情况下) 使用魔法值搜索: 123456789、1732584193(md5...特征 加密过程:new 一个 rsa 对象 ->setpublickey(key,iv (模值))->encrypt # 其他技巧 ---- 巧用 JSON.stringify/parse 来提取 js...对象 扣 js 代码或补环境(DOM、BOM),扣代码则要善于导出变量( window.xxx = ... ) 学会识别统一格式代码,过滤掉无用格式要求固定代码 学会识别 webpack 打包代码

3K50

调试JS代码

记录下近期对JS代码调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用功能有: Performance....性能报告页面的 部分,可以通过点击色块查看其所在js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后文件,建议手动修改程序替换成可读性更强原始代码文件...,方便调试 Console....查看程序打印输出,比如我想知道某个函数执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo执行时间 Network....[2,1,4,10…] 颜色数组 转换成RGB表示,js代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量增大而线性增大 通过debug观察发现颜色数组会有不少重复数值,而同样输入会导致相同输出

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

    Fiddler远程调试js

    使用Fiddler调试本地js   在我们前端开发日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。...而利用Fiddler可以修改HTTP数据特性,我们就非常敏捷地基于生产环境修改并验证,确认后再发布。 假设我们发现这个页面有问题,需要修改所引用js文件()。...在这个js session上右键点击,选择“Save – Response –Response Body…”,将js文件内容保存到本地。记住存位置,下面我们会用到这个保存下来文件。...处理方式可以选择使用文件,也可以选择合适时间暂停数据流(*bpu、*bpafter),人工干预。通过以上几个步骤,我们演示了怎样将HTTP请求重定向到本地文件,进行web调试。...这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响风险,而且不需要搭建复杂开发服务器等开发环境,非常适合快速web调试

    10K30

    ES存在unassinged shard调试方式

    v&pretty' 这个可以查看每个结点磁盘使用情况,奇怪是并没有结点存储满了,最高也使用不到70%。为什么呢?...后面查看节点各个盘使用情况,发现有一个盘使用量超出了ES默认配置,达到了87%,在merge过程中,磁盘使用量超出了限制,所以会引起shard unassigned。...原因是设置shard数太少了,查看shard状态可知,一个shard大小有100多G,磁盘大小只有250G,如果该磁盘上有两个这样shard,在Segment合并是肯定会出现问题。...在数据量较小时候,ES给该磁盘分配了两个shard,随着数据增加,shard越来越大,导致问题出现。 解决方案 参考ES提供reroute api手动移动分片即可。...先把大分片移到剩余空间大结点,增加shard数。 为什么上午执行retry_failed命令,unassigned shard没有被分配,下午执行同样命令就被分配了?

    1.5K30

    Js继承实现方式

    Js继承实现方式 继承是面向对象软件技术当中一个概念,与多态、封装共为面向对象三个基本特征。继承可以使得子类具有父类属性和方法或者重新定义、追加属性和方法等。...// 判断child构造函数Childprototype对象是否在Parent原型链上 特点 父类新增原型方法与属性,子类都能访问到 非常纯粹继承关系,实例是子类实例,也是父类实例 子类实例可以继承父类构造函数属性和方法...,只是子类实例 只继承了父类构造函数属性和方法,没有继承父类原型属性和方法 每个子类都有父类实例函数副本,拷贝了父类函数而不是引用,影响性能 实例继承 为父类实例增加成员与方法,作为实例返回...Child("child"); // 实例化子类 child.say(); // child console.log(child.from); // child 特点 实例化子类时可以向父类构造函数传参 子类实例化方式可以为...寄生组合继承 通过寄生方式,砍掉父类实例属性,在调用两次父类构造时候,就不会初始化两次实例方法和属性,避免组合继承缺点 // 定义父类 function Parent(from){

    2K20

    使用Firefox轻松调试JS

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

    6K20

    全网最优雅 React 源码调试方式

    所以他就在想,是不是有更好调试方式,能够调试 React 最初源码呢? 于是,他跑来问我:光哥,你调试 React 源码会有这些问题么?你是怎么调试呀?...但这不是我们最主要目的,现在调试依然是 react-dom.development.js: 那怎么调试 react 最初源码呢?...总结 用了 react 比较长时间后,自然会想调试下源码来深入下,但是常规调试方式只能调试 react-dom.development.js,虽然能理清逻辑,但是对应不到源码里哪些包哪些文件,总感觉和最初源码还有一段距离...东东:最终调试效果是很完美,但这个流程有点复杂 我:确实,想实现能调试最初源码,并且还能直接打开对应 react 源码项目的文件,还是比较麻烦,但好在只需要配置一次,以后就能一直用了,而且类似的源码调试方式也可以应用到其他源码调试...毫不夸张地说,这应该是全网最优雅 React 源码调试方式了。

    1.6K20

    JS破解--反反调试

    今天应小伙伴们意愿写一下过无限 debugger 两个案例(其实都很简单,只要掌握一两个操作点的话) 因为咱粉丝比较少,就直接进行网站点名了,手动狗头 有些案例弄过小伙伴,可能需要清除一下对应域名下...PS:不管是加载别的页面也好,还是刷新也罢,只要浏览器重新加载了存在 debugger 语句js,就会开始 debug,所以要先擦除debugger,再去下断点分析你想要内容 ?...案例二: 努比亚论坛:https://bbs.nubia.cn/ 因为这是一个 js 生成 cookie 案例,所以触发 debugger 机制不太一样。...此时在控制台重写目标函数 _0x4db1c,但是重写之后,继续执行的话,还是看不到cookie 生成规则 所以重写之后,不要轻举妄动,在关键位置打上断点(ps:这个案例是一个经典js生成 cookie...断在了我们预期位置,接下来就开始愉快分析吧。

    4.5K20

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

    前言 有一个礼拜没发quarku+graalvm相关内容了,因为博主在忙一个新前端项目去了,从element-ui切换到antdv,也有很多新东西需要一边啃文档一边输出,程序出现bug自是在所难免...在java开发中,debug就是一个debug启动按钮解决事情,而在前端开发中,IDEA这个开发工具也提供了非常好用jsdebug工具,博主这个用法不是网上介绍那种需要安装插件才能用方式,免安装浏览器插件可以直接用...,我这里选择就是360极速浏览器 第二步、打断点、运行jsdubg项 给需要代码打上断点,运行刚刚第一步创建好jsdebg项,IDEA会帮你在新浏览器窗口里打开刚刚设置URL地址,现在你可以在这个新打开窗口里操作...,当遇到你打断点代码,IDEA断点就会激活,这个时候就可以愉快Debug起来了,效果如下图: 结语 IDEA这个前端调试工具非常好用,却没有得到很好普及,网上搜到那种方式大多是安装一个...IDEA浏览器插件配合使用,相比来说,博主发现这个调试工具简直太好用了,而且注意哦,此法不仅可以调试VUE项目,而是适合所有的前端项目

    2.8K20

    调试 node.js 程序

    调试 node.js 程序 在程序开发中,如何快速查找定位问题是一项非常重要基本功。在实际开发过程中,或多或少都会遇到程序出现问题导致无法正常运行情况,因此,调试代码就变成了一项无法避免工作。...这里简单介绍下如何调试 node.js 程序。 使用 console.log Node 提供了全局 console 对象,该对象可以输出格式化字符串。...庆幸是,V8 引擎导出了一个支持 Node 调试接口。因此,可以使用 Node 内置调试调试程序。...Node 调试程序: node --inspect index.js 这样就会以调试模式启动 Node,可以看到调试提示信息如下: Debugger listening on ws://127.0.0.1...接下来调试操作方式和平时调试普通 JavaScript 代码一样。

    2.9K20

    用医生思考方式调试代码

    虽然像测试驱动开发等实践和SOLID原则等指导,可以帮助我们模拟问题,简化解决方案,但大多数软件应用程序都是一些复杂系统,每个组件也会以意想不到方式进行交互和组合。...当软件系统中发生意外情况时,会造成很严重后果。幸运是,软件开发人员可以借鉴另一门更古老学科,来应对对于复杂系统关注、维护和调试,这门学科就是:医学。 ?...虽然上面这4个步骤是为医生而整理,但是我们同样可以像一个医生一样思考,用一种强有力方式来找到并消除软件缺陷。将诊断过程分解为一个一个目的单一步骤,确保每个步骤都能得到应有的重视。...按照优先顺序是为了保证专注检查重点,并作出务实干预措施。然后进行测试,排除假设,以确保调试严谨。 白板是个好东西 当错误发生时,我们大多会想也不想地立马去调查最可能原因。...虽然支持性证据有时候或许能有助于你找到bug所在,但是失败测试驱动了演绎过程。这乍一看上去似乎有悖直觉,但是测试-消除假设策略是追溯bug到它起因最快方式

    66960

    加密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

    5.6K50

    用医生思考方式调试代码

    虽然像测试驱动开发等实践和SOLID原则等指导,可以帮助我们模拟问题,简化解决方案,但大多数软件应用程序都是一些复杂系统,每个组件也会以意想不到方式进行交互和组合。...当软件系统中发生意外情况时,会造成很严重后果。幸运是,软件开发人员可以借鉴另一门更古老学科,来应对对于复杂系统关注、维护和调试,这门学科就是:医学。 ?...虽然上面这4个步骤是为医生而整理,但是我们同样可以像一个医生一样思考,用一种强有力方式来找到并消除软件缺陷。将诊断过程分解为一个一个目的单一步骤,确保每个步骤都能得到应有的重视。...按照优先顺序是为了保证专注检查重点,并作出务实干预措施。然后进行测试,排除假设,以确保调试严谨。 白板是个好东西 当错误发生时,我们大多会想也不想地立马去调查最可能原因。...虽然支持性证据有时候或许能有助于你找到bug所在,但是失败测试驱动了演绎过程。这乍一看上去似乎有悖直觉,但是测试-消除假设策略是追溯bug到它起因最快方式

    784110
    领券