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.rhkb.cn/news/339604.html

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

相关文章

动画技术在AI绘画中的革新作用

引言&#xff1a; 随着人工智能技术的飞速发展&#xff0c;AI绘画作为其应用领域之一&#xff0c;已经引起了艺术和技术界的广泛关注。动画技术&#xff0c;作为视觉艺术的重要组成部分&#xff0c;与AI绘画的结合不仅为传统绘画带来了新的活力&#xff0c;也推动了创意表达和艺…

vscode 默认终端(Terminal) 为CMD,但是新建是powerShell

☆ 问题描述 vscode 默认终端&#xff08;Terminal&#xff09; 为CMD&#xff0c;但是新建是powerShell ★ 解决方案 随便设置其他为默认&#xff0c;然后再设置回来CMD为默认就行了&#xff0c;实在不行就重装vscode吧… ✅ 总结 应该是vscode的小bug

计算机网络学习实践:模拟PPP协议验证虚拟局域网(VLAN)

计算机网络实践&#xff1a;模拟PPP协议&&验证虚拟局域网&#xff08;VLAN&#xff09; 挺有意思的大家可以跟着做一做&#xff0c;我是跟着韩志刚老师的视频做的 https://www.bilibili.com/video/BV1Qr4y1N7cH?p31&vd_source7831c5b97cfc5c745eb48ff04f6515e7 …

【赠书第27期】向AI提问的艺术:提示工程入门与应用

文章目录 前言 1 问题的构建 1.1 明确性与具体性 1.2 结构化与层次性 1.3 相关性与针对性 2 提问的技巧 2.1 简洁明了 2.2 避免歧义 2.3 使用自然语言 3 与AI的互动策略 3.1 耐心与理解 3.2 逐步引导 3.3 反馈与调整 4 总结与展望 5 推荐图书 6 粉丝福利 前言 …

31.线性变换及对应矩阵

文章目录 1. 线性变换2. 特殊矩阵2.1 投影矩阵2.2 平移矩阵2.3 旋转矩阵2.4 三维转二维矩阵 3. 基向量的线性变换3.1 代数形式3.2 矩阵形式 4. 坐标5. 求导 1. 线性变换 线性代数从线性变换开始&#xff0c;是线性代数的另外一个起点。很多物理学家并不关系坐标的值&#xff0…

gitblit 环境搭建,服务器迁移记录

下载 Gitblit&#xff1a; http://www.gitblit.com/ JDK&#xff1a;gitblit网站显示需要jdk1.7&#xff0c;这里用的1.8。 Git&#xff1a;到官网下载最新版本安装 1). 分别安装JDK&#xff0c;Git&#xff0c;配置环境变量&#xff0c;下载并解压Gitblit 2). 创建代码仓库 …

IDEA配置Java远程调试,以CVE-2024-4956为例

背景 学习代码审计&#xff0c;看到一些Java的漏洞&#xff0c;想要动手调试&#xff0c;复现漏洞搭建环境可以使用docker快速创建&#xff0c;了解到Java可以远程调试&#xff0c;本文记录学习Java远程调试环境搭建的过程。 远程调试的原理 如下图&#xff08;图源&#xf…

数据库索引的理解

目录 1.索引是什么&#xff0c;解决了什么问题 2.索引付出了什么代价 3.如何使用sql索引&#xff0c;有何注意事项 普通索引&#xff1a; 唯一索引&#xff1a; 主键索引(Primary Key Index)&#xff1a; 删除索引: 创建主键索引的基本语法: 4.索引背后的数据结构 1.索…

玩转Linux进度条

准备工作&#xff1a; 一.关于缓冲区 首先&#xff0c;咱们先来一段有意思的代码&#xff1a; #include<stdio.h> #include<unistd.h> int main() {printf("you can see me");sleep(5);} 你可以在你的本地运行一下&#xff0c;这里我告诉大家运行结果…

如何用python做一个用户登录界面——浔川python社

1 需解决的问题&#xff1a; 1.1如何用python做一个用户登录界面&#xff1f; 1.2需要用到哪些库、模块&#xff1f; 2 问题解决&#xff1a; 2.1 回答 1.1 &#xff1a;合理即可&#xff0c;无标准回答。 2.2 回答 1.2 &#xff1a;tk库&#xff08;缩写&#xff09;、GUL界面…

appium元素定位工具_uiautomatorviewer.bat

特点&#xff1a; uiautomatorviewer是android-sdk自带的元素定位工具uiautomatorviewer只能用于安卓系统&#xff1b;它是通过截屏分析XML布局文件方式&#xff0c;来提供控件信息的查看服务 uiautomatorviewer.bat 基本使用 路径&#xff1a;这个工具是Android SDK中自带&…

项目中统一异常处理

项目中统一异常处理 1.异常处理框架图2.实现 1.异常处理框架图 异常处理除了输出在日志中&#xff0c;还需要提示给用户&#xff0c;前端和后端需要作一些约定&#xff1a; 错误提示信息统一以json格式返回给前端。以HTTP状态码决定当前是否出错&#xff0c;非200为操作异常。…

QML信号连接到c++的槽函数(五)

文章目录 前言一、QML Signal and Handler Event System二、QML信号连接到c++的槽函数代码实例1. 创建一个QML 工程2. 用C++ 实现一个QML Types3. 代码实例4. 运行结果总结参考资料前言 本文主要介绍,如何将QML 中的信号连接到C++ 中的槽函数 软硬件环境: 硬件:PC 软件:wi…

在国内PMP含金量并不高?

PMP已经在全球194个国家和地区得到广泛认可&#xff0c;自1999年开始在国内实施。PMP被认为是项目管理专业身份的象征&#xff0c;是项目经理最重要的资质。获得PMP证书意味着个人的项目操作水平已经得到了PMI的认可&#xff0c;具备国际专业项目操作者水平&#xff0c;有资格专…

大模型应用之基于Langchain的测试用例生成

一 用例生成实践效果 在组内的日常工作安排中&#xff0c;持续优化测试技术、提高测试效率始终是重点任务。近期&#xff0c;我们在探索实践使用大模型生成测试用例&#xff0c;期望能够借助其强大的自然语言处理能力&#xff0c;自动化地生成更全面和高质量的测试用例。 当前…

[数据集][目标检测]旋风检测数据集VOC+YOLO格式157张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;159 标注数量(xml文件个数)&#xff1a;159 标注数量(txt文件个数)&#xff1a;159 标注类别…

1. MySQL 数据库的基本操作

文章目录 【 1. SQL 的书写规则 】大小写规则常量的表示注释 【 2. RDBMS 术语 】Table 表Filed 域/字段Column 列Record 记录NULL 空值Constraint 约束数据的完整性范式 【 3. 数据库基本操作函数 】3.1 SHOW DATABASES 显示数据库3.2 CREATE DATABASE 创建数据库3.3 ALTER DA…

STM32-14-FSMC_LCD

STM32-01-认识单片机 STM32-02-基础知识 STM32-03-HAL库 STM32-04-时钟树 STM32-05-SYSTEM文件夹 STM32-06-GPIO STM32-07-外部中断 STM32-08-串口 STM32-09-IWDG和WWDG STM32-10-定时器 STM32-11-电容触摸按键 STM32-12-OLED模块 STM32-13-MPU 文章目录 1. 显示器分类2. LCD简…

[Windows] 植物大战僵尸杂交版

游戏包含冒险模式、挑战模式、生存模式三种不同玩法。冒险模式主打关卡闯关&#xff0c;挑战模式则挑战特殊设计的关卡&#xff0c;生存模式结合无尽模式和特殊地图&#xff0c;各具特色。玩家可根据喜好自由选择模式&#xff0c;体验不同的游戏乐趣。快来尝试这款独特的pvz游戏…

6月2(信息差)

&#x1f30d;特斯拉&#xff1a;Model3高性能版预计6月中旬开启首批交付 &#x1f384;微软对开源字体 Cascadia Code 进行重大更新 ✨天猫618加码引爆消费热潮 截至晚9点185个品牌成交破亿 1.瑞士清洁科技公司Librec开发废旧锂离子电池回收技术&#xff0c;可回收电池90%的…