JS - 调试

最新推荐文章于 2024-04-28 11:43:36 发布
最新推荐文章于 2024-04-28 11:43:36 发布
阅读量94 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kelly0721/article/details/95459479
博客介绍了前端调试和日志输出的实用技巧。提到alert基本可放弃，debugger是找bug的好帮手。还介绍了console的多种用法，如log可接受多参数，用JSON方法保证打印数据准确性，dir查看DOM对象属性方法，table获取列表属性，以及chrome Sources中快速查找文件和展开压缩文件的操作。
  1. alert (这个就不说了，基本可以放弃了
  2. debugger (好用！谁用谁知道！找bug小能手
  3. console
    1. console.log(a,b,c) ( 可以接受多个参数
    2. JSON.parse(JSON.stringify(a)) ( 当a是引用类型{数组或者自定义对象}的时候，当你展开 console.log 的时候，出现的数据都是最新的数据，用这个方法可以保证打印出来的是当时时间点的数据
    3. console.dir ( 看一个DOM对象里面到底有什么属性和方法
    4. console.table ( 可以获取列表的某些属性
  4. chrome 的 Sources
    1. Command + P 快速查找文件
    2. 查看压缩文件 （ 左下角的 {} ，可以展开压缩文件
      在这里插入图片描述
如何使用js去调用vscode-js-debugger的方法去调试网页？
**My Coding Family**
12-03 744
🏆本文收录于专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家！持续更新中，up！up！up！！
WT-JS逆向调试工具
最新发布
gitblog_06712的博客
04-22 1523
WT-JS逆向调试工具 【下载地址】WT-JS逆向调试工具 WT-JS逆向调试工具是一款专为前端开发者打造的JavaScript调试利器，旨在帮助开发者深入分析代码执行过程，快速定位问题并优化性能。该工具提供代码跟踪、变量查看、断点调试和性能分析等核心功能，让开发者能够实时监控代码运行状态，轻松修改变量值，精准设置断点，...
JS逆向 -- 动态调试
Web安全工具库
03-08 1099
一、在网页输入要提交的信息 二、打开开发者工具，查看网络选项卡，点击提交 三、数据是被加密的，搜索关键字“pwd”，点击开发者工具右上角的三个点，然后选择搜索 四、输入关键字“pwd”，然后双击，跳转到js源码 五、在出现pwd的地方都双击下断，下断成功会变成蓝色 六、重新提交页面，自动断下来，页面变灰，单步跟踪调试 七、添加监视，按回车键，查看pwd变量的值 八、pwd暂时没有值，往下执行一步，单步跳过 九、据需单步跳过，直到出现加密的地方，往下可以看到
探秘JavaScript移动调试神器：JS-Mobile-Console
gitblog_00027的博客
04-27 1331
探秘JavaScript移动调试神器：JS-Mobile-Console 去发现同类优质开源项目:https://gitcode.com/ 在前端开发过程中，调试是不可或缺的一环。尤其是在移动端，由于环境限制和浏览器差异，调试往往变得更加复杂。为了解决这个问题，让我们一起深入了解一下B1naryStudio团队开发的开源项目JS-Mobile-Console。它是一个轻量级、高效的JavaScri...
js---调试
张默的博客
09-12 122
JavaScript 调试工具 在程序代码中寻找错误叫做代码调试。 调试很难，但幸运的是，很多浏览器都内置了调试工具。 内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。 有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。 浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。 console.log() 方法...
Javascript-断点调试
yen_zz的博客
04-21 1256
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。 浏览器按F12-->sources-->找回需要调试的文件-->在程序的某一行设置断点 Watch：监视，通过watch可以监视变量的值的变化，非常的常用。 F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。 代码调试的能力非常重要，只有学会了代码调试，才能学会
19 JavaScript学习：调试
热门推荐
百锦再的博客
04-28 8万+
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
JS逆向 -- 本地调试
Web安全工具库
03-26 864
一、通过Fiddler抓包，找到要替换的JS文件，这里要替换的事md5.js 二、新建一个md5.js文件，内容为包里的内容，为了区分，我们给他多加一个变量 三、将该包，拖到AutoResponder选项卡，该打钩的全部打钩， 四、选择本地文件替换，点击save保存 五、打开F12开发者工具，刷新页面，加载的md5就是我们本地替换的。 欢迎关注公众号：逆向有你 欢迎关注视频号：之乎者也吧 ...
JS 基础知识---调试
望望byte的博客
07-31 227
文章目录JS调试JS调试器console.log()方法设置断点debugger关键词主流浏览器的调试工具 JS调试 本笔记参照W3School 每当写一些新的JS代码时，错误总会发生 在没有调试器的情况下写 JavaScript 是有难度的。 调试是测试、找到并减少计算机程序中 bug（错误）的过程。 历史上首个已知的计算机 bug 是一只卡在电子器件中的真实的虫子（一种昆虫。 您的代码中也许包含了语法错误，或者逻辑错误，这些都难以诊断。 通常，如果 JavaScript 代码包含错误，也不会发
js -断点调试技巧
qq_41365048的博客
12-13 1171
说明： 使用这个之后再也用不上 console.log() 打印信息和数据，来一句真香。 官网链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger#%E8%A7%84%E8%8C%83 使用方法： 在需要调试的 js 代码中输入 “ debugger; ” 便可启动断点调试，使用方法和步骤同谷歌浏览器调试 js 一样。 ...
JS - 生成随机数的方法汇总
kelly0721的博客
04-17 1万+
一、随机浮点数的生成 生成 [ 0, 1 ) 范围内的随机数（大于等于0，小于1）var random = Math.random(); 生成 [ n, m ) 范围内的随机数（大于等于n，小于m）var random = Math.random()*(m-n)+n 生成 [n,m]、(n,m)、(n,m] 范围内的随机数//取得[n,m]范围随机数 function fullClose(n,m) { var result = Math.random()*(m+1-n)+n; whil
JS - toLocaleString() 方法
kelly0721的博客
12-31 1万+
object.toLocaleString([locales [, options]])
JS -获取屏幕/浏览器高度
kelly0721的博客
12-07 1万+
一、展示图 二、屏幕信息 window.screen.height：设备显示屏的高度 这个是设备显示屏的高度，各个机型的显示屏高度都不一样，可以在系统设置中看 window.screen.availHeight：屏幕的可用高度 一般是显示屏高度减去显示屏工具栏的高度 任务栏高度 = screen.height - screen.availHeight 三、浏览器信息 window.ou...
遍历对象属性及确保遍历的属性顺序
kelly0721的博客
01-03 5633
对象的属性分为两种：数据属性和访问器属性，也就是是否可枚举。 对象属性分为原型属性和实例属性。 原型属性是定义在对象的原型（prototype）中的属性，而实例属性是添加的新属性。 Obejct.keys(obj),返回一个数组 用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。 test = () => { const resul...
JS-input:file
kelly0721的博客
03-07 3380
在chrome浏览器下，为了数据安全，input:file 是不能主动触发 click 事件的，所以，为了美化 input:file 可以使用 opacity:0 达到隐藏的效果。
JS - 函数柯里化
kelly0721的博客
12-26 2813
柯里化的定义、参数复用、提前返回、延迟计算、柯里化函数的实现
检测对象类型
kelly0721的博客
01-10 2601
现在掌握的检测对象类型有几种： typeof instanceof Object.prototype.toString.call() 严格比较运算符 根据不同的情况做不同的选择吧。 typeof typeof 返回的结果是字符串，返回如下几个结果：“number”、“string”、“boolean”、“object”、“function” 和 “undefined”，即它只可以判断这几种...
JS - 深拷贝和浅拷贝
kelly0721的博客
09-01 2457
变量拷贝包括浅复制和深复制
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2438
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
深入了解Node.js-Locus调试模块的使用与功能
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让JavaScript代码可以运行在服务器端。由于其异步I/O，事件驱动，非阻塞I/O的特点，使得Node.js在构建大规模分布式应用方面具有独特的优势。但是，这些特点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值