Chrome 调试技巧

1. alert

在最早的时候,javascript 程序员调试代码都是通过 alert 进行,但 alert 会让整个程序被打断,并且还有一个很大的缺点,调试完成之后,如果忘记将 alert 删除 or 注释掉,导致别人访问该页面时会莫名弹出个框框。所以 alert 调试习惯逐渐被废弃掉。

<script>alert("alert()方法用于显示带有一条指定消息和一个确认的按钮的警告框。");
</script>

 

目前,alert 警告框常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。

2. console

作为最常使用的方法,想必⼤家都⽤ console.log 在控制台输出过内容,判断代码运行是否正确。

2.1 基本输出

<script>console.log("打印字符串");console.error("打印自定义错误信息");console.info("打印自定义信息");console.warn("打印自定义警告信息");console.debug("打印自定义调试信息");// console.clear(); // 清空控制台
</script>

图一是在 Chrome 浏览器的测试结果,不支持 debug 方法;图二是火狐浏览器的测试结果。

注意:上面输出的 error 和 throw 中的 error 是不一样的,前者只是输出错误信息,无法捕获,不会发生冒泡,更不会中止程序运行。 

2.2 格式化输出

<script>console.log("%s年", 2024);console.log("%d年%d月", 2024, 6);console.log("%f", 3.1415926);console.log("%o", console);console.log("%c自定义样式", "font-size:26px; color:lightblue");console.log("%c前%c后","font-size:20px; color:red","font-size:10px; color:orange");
</script>

console 支持自定义样式输出结果,常见如下:

1. %s:表示字符串

2. %d:表示整数

3. %f:表示小数

4. %o:表示对象

2.3 DOM 输出

<ul><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
<script>const list = document.getElementsByTagName('li')console.log(list);
</script>

2.4 对象输出

<script>const stu = [{ name: "Alice", age: 18, hobby: "reading" },{ name: "Bob", age: 19, hobby: "swimming" },{ name: "Monica", age: 20, hobby: "shopping" },];console.log(stu);console.table(stu);
</script>

想不到 console对象 还可以输出一个表格,之后,在遇到多个对象的集合时,可以使⽤ table ⽅法,这样输出更清晰。

2.5 成组输出

<script>// 建立一个参数组console.group('start');// 定义组名(任意)console.log('group1');console.log('group2');console.log('group3');console.log('group4'); console.log('group5');console.groupEnd();
</script>

通过 console 对象的 group ⽅法,在输出时创建⼀个分组,groupEnd 方法表示分组的终点。 

2.6 断言

断⾔语句,在 js 中,当第⼀个表达式或参数为 true 时,什么也不发⽣;为 false 时终⽌程序并报错。例如:

<script>console.assert(true,'第一个参数或者表达式为 true');console.assert(false,'第一个参数或者表达式为 false');
</script>

3. debugger

debugger 俗称断点,⼜称单步调试。所谓单步调试,就是点⼀下,执⾏⼀句代码,并且可以查看当前作⽤域中可⻅的所有变量和值。

<script>let array = [];for (let i = 0; i < 10; i++) {debugger;array[i] = i;}console.log(array);
</script>

执⾏该⽂件后,到控制台 Sources 标签⻚下进⾏单步调试,直到结束。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/21374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迅狐短剧小程序源码:打造个性化的追剧体验

随着移动互联网的普及&#xff0c;短剧小程序源码的开发成为了影视爱好者的新宠。它不仅为用户提供了便捷的追剧体验&#xff0c;还通过推荐系统、观看历史、个性化喜好等特色功能&#xff0c;满足了用户的多样化需求。本文将深入探讨短剧小程序源码的特点、优势以及如何实现多…

创新指南|领导者如何评估自己的表现——麦肯锡专有的CEO卓越评估工具

CEO是任何组织中最具挑战性和要求最高的职位之一&#xff0c;尤其是在当前的经济环境下。这也是最重要的职位之一。研究表明&#xff0c;一家公司 45% 的业绩可归因于CEO的影响。但 CEO 们的实际表现如何&#xff1f;他们面临哪些问题&#xff1f;如何帮助他们发挥出最佳水平&a…

贝锐向日葵分组策略:减少重复操作,提升管理效率

面对大数量级的IT设备&#xff0c;如何高效实施管理是运维的关键所在&#xff0c;如何快速准确的对大量的设备按需分组&#xff0c;则是管理精准触达的第一步。 但是&#xff0c;传统的分组方式应付少量设备还可行&#xff0c;设备数量级一旦来到上千台甚至更多时&#xff0c;…

6.4 Go 映射(Map)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Java 异常处理详解(如果想知道Java中有关异常处理的知识点,那么只看这一篇就足够了!)

前言&#xff1a;异常处理是 Java 编程中非常重要的一部分&#xff0c;它能够有效地捕获和处理程序运行中的错误&#xff0c;提高代码的健壮性和可靠性。本文将深入探讨 Java 中异常的概念、体系结构、抛出、解决方式以及如何自定义异常&#xff0c;并结合代码案例进行详细解释…

mysql 如果有按照时间范围查询结果

1.前端传2024-06-21 到我们xml sql 文件中默认实际是 2024-06-21 00:00:00 <if test"dto.startTime ! null">and ps.created_at > #{dto.startTime}</if><if test"dto.endTime ! null">and ps.created_at < #{dto.endTime}</if…

Linux命令篇(六):vi/vim专项

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝您生活愉快&#xff01; 文章目录 一、什么是vim二…

Microsoft Outlook Lite 引入短信功能

随着科技的不断进步&#xff0c;我们的沟通方式也在不断演变。微软最新推出的 Outlook Lite 应用&#xff0c;不仅为我们提供了一个轻量级的电子邮件管理工具&#xff0c;现在更是带来了一项令人兴奋的新功能——短信服务。 Outlook Lite&#xff1a;轻量级&#xff0c;功能全…

今日好料推荐(ARM嵌入式)

今日好料推荐&#xff08;ARM嵌入式&#xff09; 参考资料在文末获取&#xff0c;关注我&#xff0c;获取优质资源。 给我留言&#xff0c;会帮大家寻找需要的资料。 ARM 嵌入式系统 嵌入式系统在现代电子设备中扮演着至关重要的角色&#xff0c;从智能手机到工业自动化&am…

深入了解 C 语言 Bug

目录 一、引言二、Bug的定义三、Bug的由来四、Bug的影响五、应对 Bug 的方法六、结论 一、引言 1、在 C 语言的编程世界中&#xff0c;Bug 是一个我们无法回避的话题。 2、Bug&#xff0c;简单来说&#xff0c;就是程序中存在的错误或缺陷。它可以表现为程序运行结果的异常、崩…

HALCON-从入门到入门-形态学操作-千变万化的region

1.废话 计算机视觉中的形态学操作是一种基本的数字图像处理技术&#xff0c;主要用于图像的形态结构改变&#xff0c;以便执行前后景分割、形状检测等任务。 膨胀&#xff08;Dilation&#xff09;&#xff1a; 膨胀操作是将结构元素在图像上滑动&#xff0c;如果结构元素与图…

CMakeFile.txt通过sysroot方式后生成makefile报错

报错信息如下&#xff1a; -- The C compiler identification is unknown -- The CXX compiler identification is unknown -- Check for working C compiler: /home/xj/asm/host/bin/aarch64-buildroot-linux-gnu-gcc -- Check for working C compiler: /home/xj/asm/host/bi…

VScode远程连接linux服务器开发,误删了文件怎么找回。

VScode远程连接linux服务器开发&#xff0c;误删了代码文件 因为远程服务器大家都在用&#xff0c;没有足够权限去折腾。找遍了没找到方法&#xff0c;就告诉我远程的文件本地没有缓存啊&#xff01;我就差点开始重写代码了。 后来被我发现了TIMELINE功能&#xff0c;这个功能…

YUM安装httpd实验配置apache

实验目的及实验要求&#xff1a; 实验目的&#xff1a; 2.实验要求&#xff1a; &#xff08;1&#xff09;完成命令的编写&#xff0c;并能正确运行&#xff1b; &#xff08;2&#xff09;从中熟练掌握命令的功能及作用。 实验设备及软件&#xff1a; pc机 配置好Lin…

叉积和法向量学习笔记

目录 叉积用的内积 相似点 给定平面上的两个向量 A 和 B&#xff0c;叉积和法向量相等吗 理解这点的关键&#xff1a; 结论&#xff1a; 叉积判断平面内两个向量是否相交 叉积&#xff08;Cross Product&#xff09;和法向量&#xff08;Normal Vector&#xff09;确实有…

js 给数组对象添加多个属性

// 假设有一个数组对象 let items [{ id: 1, name: Item 1 },{ id: 2, name: Item 2 },{ id: 3, name: Item 3 } ];// 要添加的新属性 const newProps {newProp1: value1,newProp2: value2 };// 使用map方法添加新属性 let updatedItems items.map(item > ({ ...item, ..…

什么是AI应用开发

&#x1f9d9;‍♂️ 诸位好&#xff0c;吾乃斜杠君&#xff0c;编程界之翘楚&#xff0c;代码之大师。算法如流水&#xff0c;逻辑如棋局。 &#x1f4dc; 吾之笔记&#xff0c;内含诸般技术之秘诀。吾欲以此笔记&#xff0c;传授编程之道&#xff0c;助汝解技术难题。 &#…

【AR开发-开源框架】使用Sceneform-EQR快速开发AR应用,当前接入了AREngine、ORB-SLAM,可快速地适配不同的安卓设备

Sceneform-EQR Sceneform 概览 Sceneform是一个3D框架&#xff0c;具有基于物理的渲染器&#xff0c;针对移动设备进行了优化&#xff0c;使您可以轻松构建增强现实应用程序&#xff0c;而无需OpenGL。 借助 Sceneform&#xff0c;您可以轻松地在 AR 应用和非 AR 应用中渲染…

音乐版权NFT开发流程

开发音乐版权NFT&#xff08;非同质化代币&#xff09;的流程涉及多个步骤&#xff0c;从概念化和版权管理到技术实现和市场推广。以下是一个详细的开发流程指南。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.概念化与规划 定义…

使用git

解决参考如下链接 git设置全局用户名和邮箱以及删除方式