当前位置: 首页 > news >正文

JavaScript前端 console 控制台详细解析与代码实例

JavaScript Console(控制台)是一个重要的工具,可以用于调试和测试 JavaScript 代码。在浏览器中,你可以使用控制台来查看 JavaScript 输出、测试代码、调试错误等。在本文中,我们将详细介绍控制台的常用功能和代码实例。

打开控制台

在大多数主流浏览器中,你可以使用快捷键 F12 或者 Ctrl+Shift+I 来打开控制台。这里以 Chrome 浏览器为例。在 Chrome 中打开控制台的方法如下:

  1. 打开 Chrome 浏览器。
  2. 右键单击页面上的任何位置,然后选择“检查”。
  3. 在打开的窗口中,选择“Console(控制台)”选项卡。

控制台常用功能

打印输出

通过控制台,你可以在浏览器中打印输出信息。可以使用 console.log() 方法来输出文本或变量。例如,下面的代码将输出字符串 “Hello World!”:

console.log("Hello World!");

你还可以输出变量、对象、数组等:

let num = 5;
let arr = [1, 2, 3];
let obj = { name: "Tom", age: 20 };console.log(num); // 输出 5
console.log(arr); // 输出 [1, 2, 3]
console.log(obj); // 输出 {name: "Tom", age: 20}

警告和错误

除了打印输出信息之外,控制台还可以用来显示警告和错误。你可以使用 console.warn() 方法来输出警告信息,使用 console.error() 方法来输出错误信息。例如:

console.warn("This is a warning!");
console.error("This is an error!");

计时器

控制台还有一个计时器的功能,可以用来测试代码执行的时间。你可以使用 console.time()console.timeEnd() 来开始和结束计时器。例如:

console.time("test");for (let i = 0; i < 1000000; i++) {// some code to test execution time
}console.timeEnd("test");

这段代码将输出执行时间,例如 “test: 14.214ms”。

条件断言

控制台还可以用来进行条件断言。你可以使用 console.assert() 方法来在控制台中测试条件是否为真。如果条件为 false,控制台将输出错误信息。例如:

let num = 5;
console.assert(num === 10, "num 不等于 10");

这段代码将输出错误信息 “Assertion failed: num 不等于 10”。

清除控制台

如果你想要清除控制台输出的内容,可以使用 console.clear() 方法。例如:

console.clear();

这个代码将清除控制台的输出内容。

代码实例

输出当前时间

下面的代码将输出当前时间到控制台:

console.log(new Date());

输出所有图片元素

下面的代码将输出页面上所有的图片元素:

let images = document.getElementsByTagName("img");for (let i = 0; i < images.length; i++) {console.log(images[i]);
}

输出所有链接元素

下面的代码将输出页面上所有的链接元素:

let links = document.getElementsByTagName("a");for (let i = 0; i < links.length; i++) {console.log(links[i]);
}

输出页面所有样式

下面的代码将输出页面上所有的样式:

let styles = document.getElementsByTagName("style");for (let i = 0; i < styles.length; i++) {console.log(styles[i]);
}

输出页面所有脚本

下面的代码将输出页面上所有的脚本:

let scripts = document.getElementsByTagName("script");for (let i = 0; i < scripts.length; i++) {console.log(scripts[i]);
}

输出所有页面元素

下面的代码将输出页面上所有的元素:

let elements = document.getElementsByTagName("*");for (let i = 0; i < elements.length; i++) {console.log(elements[i]);
}

输出当前页面 URL

下面的代码将输出当前页面的 URL:

console.log(location.href);

输出当前页面的域名

下面的代码将输出当前页面的域名:

console.log(location.hostname);

输出当前页面的路径

下面的代码将输出当前页面的路径:

console.log(location.pathname);

输出当前页面的端口号

下面的代码将输出当前页面的端口号:

console.log(location.port);

输出当前页面的协议

下面的代码将输出当前页面的协议:

console.log(location.protocol);

结论

控制台是一个非常有用的工具,可以帮助你调试和测试 JavaScript 代码。本文介绍了控制台的常用功能和代码实例,希望对你有所帮助。

相关文章:

JavaScript前端 console 控制台详细解析与代码实例

JavaScript Console&#xff08;控制台&#xff09;是一个重要的工具&#xff0c;可以用于调试和测试 JavaScript 代码。在浏览器中&#xff0c;你可以使用控制台来查看 JavaScript 输出、测试代码、调试错误等。在本文中&#xff0c;我们将详细介绍控制台的常用功能和代码实例…...

idea中启动多例项目配置

多实例启动 日常本地开发微服务项目时&#xff0c;博主想要验证一下网关的负载均衡以及感知服务上下线能力时&#xff0c;需要用到多实例启动。 那么什么是多实例启动嘞&#xff1f;简单说就是能在本地同时启动多个同一服务。打个比方项目中有一个 MobileApplication 服务&…...

Activiti7流程结束监听事件中,抛出的异常无法被spring全局异常捕捉

ProcessRuntimeEventListener activiti7中&#xff0c;提供了ProcessRuntimeEventListener监听器&#xff0c;用于监听流程实例的结束事件 /*** 流程完成监听器*/ Slf4j Component public class ProcessCompleteListener implements ProcessRuntimeEventListener<ProcessC…...

Android 默认关闭自动旋转屏幕功能

Android 默认关闭自动旋转屏幕功能 接到客户邮件想要默认关闭设备的自动旋转屏幕功能&#xff0c;具体修改参照如下&#xff1a; /vendor/mediatek/proprietary/packages/apps/SettingsProvider/res/values/defaults.xml - <bool name"def_accelerometer_rotati…...

软文推广方案,媒介盒子分享

作为企业宣传的手段&#xff0c;它能用较低的成本获得较好的宣传效果&#xff0c;但有许多企业在进行软文推广时并不起效&#xff0c;这是因为没掌握好方法。今天媒介盒子就来告诉大家&#xff0c;通用的软文推广方案。 一、 明确推广目标以及受众 明确软文推广的目标有助于明…...

CSDN热榜分析6:将实时爬取的热榜数据导入sqlite

文章目录 初始化数据库接口更改数据库写入 初始化数据库 引入数据库的目的不止是为了存储&#xff0c;更多地也是为了便于查询&#xff0c;否则也没必要用一个Text控件来展示信息了。 所以一个正常的工作逻辑是&#xff0c;一打开热榜分析系统&#xff0c;也就同步打开数据库…...

2023年11月1日,Google全新域名来袭:.ing域名现已问世!

2023年11月1日(Oct31,2023美国与中国时差)Google宣布&#xff0c;正式推出.ing域名&#xff0c;这是一种新的顶级域名&#xff0c;旨在为用户提供更多的选择和创意。.ing域名是由Google和国际互联网名称与数字地址分配机构&#xff08;ICANN&#xff09;合作开发的&#xff0c;…...

【设计模式】第22节:行为型模式之“状态模式”

一、简介 状态模式一般用来实现状态机&#xff0c;而状态机常用在游戏、工作流引擎等系统开发中。不过&#xff0c;状态机的实现方式有多种&#xff0c;除了状态模式&#xff0c;比较常用的还有分支逻辑法和查表法。该模式允许对象内部状态改变使改变它的行为。 二、适用场景…...

JavaSE21——ArrayList

集合框架 ArrayList 一、概述 ArrayList 类是一个可以动态修改的数组&#xff0c;与普通数组的区别就是它是没有固定大小的限制&#xff0c;我们可以添加或删除元素。 ArrayList 继承了 AbstractList &#xff0c;并实现了 List 接口。 ArrayList中的元素可以通过索引访问…...

找质数(枚举 埃氏筛 线性筛)

输入一个数&#xff0c;返回小于等于这个数的质数。 枚举法&#xff1a; public static int countPrimes(int n) {int cnt0;for(int i2;i<n;i) {if(prime(i))cnt;}return cnt;}private static boolean prime(int x) {for(int i2;i*i<x;i){if(x%i0)return false;}return …...

第十二章 ObjectScript 系统标志和限定符 (qspec) - 标志

文章目录 第十二章 ObjectScript 系统标志和限定符 (qspec) - 标志 示例取消Negation标志Flags 第十二章 ObjectScript 系统标志和限定符 (qspec) - 标志 类库中的许多方法都接受 qspec 参数&#xff0c;通过该参数&#xff0c;可以控制将外部源导入 IRIS、控制代码的编译方式以…...

解决Windows Server 2012 由于没有远程桌面授权服务器可以提供需求可证

刚开始提示 之后就登录不了 &#xff08;如下图提示&#xff09; 由于windows server 2012 R2 安装了 远程桌面角色&#xff0c;但是这个角色是120天免费的&#xff0c;需要购买授权的。解决方法是取消/删除这个角色&#xff0c;就可以恢复正常的远程 一直下一步 远程桌面服…...

上位机底部栏 UI如何设置

上位机如果像设置个多页面切换&#xff1a; 位置&#xff1a; 代码如下&#xff1a; "tabBar": {"color": "black","selectedColor": "#d43c33","borderStyle":"black","backgroundColor": …...

MySQL表的增删改查(基础)

文章目录 一、CRUD二、新增&#xff08;Create&#xff09;2.1 单行数据全列插入2.2多行数据指定列插入 三、查询3.1 全列查询3.2 指定列查询3.3 查询字段表达式3.4 别名3.5 去重 DISTINCT3.6 排序3.7 条件查询 WHERE3.8 分页查询 LIMIT 四、修改&#xff08;Update&#xff09…...

uniapp书写顶部选项卡代码详细例子

以下是一个基于uni-app框架&#xff0c;使用顶部选项卡的代码示例。 在页面的.vue文件中&#xff0c;添加一个uni-tab-bar组件&#xff0c;并在组件内部添加多个uni-tab-bar-item组件&#xff0c;来实现顶部选项卡的布局。 <template><view><uni-tab-bar :cur…...

注册中心ZK、nameServer、eureka、Nacos介绍与对比

前言 注册中心的由来 微服务架构是存在着很多跨服务调用,每个服务都存在着多个节点,如果有多个提供者和消费者,当提供者增加/减少或者消费者增加/减少,双方都需要感知发现。所以诞生了注册中心这个中间件。 市面上有很多注册中心,如 Zookeeper、NameServer、Eureka、Na…...

杂志详情。

<!DOCTYPE html> <html><head><title>杂志详情</title><meta http-equiv"content-type" content"text/html; charsetutf-8"/><meta name"apple-mobile-web-app-capable" content"yes"/><…...

前端知识与基础应用#2

标签的分类 关于标签我们可以分为 &#xff1a; 单标签&#xff1a;img, br hr 双标签&#xff1a;a&#xff0c;h,div 按照属性可分为&#xff1a; 块儿标签&#xff08;自己独自占一行&#xff09;&#xff1a;h1-h6, p,div 行内&#xff08;内联&#xff09;标签&#xff08…...

【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割6(数据预处理)

由于之前哔站作者整理的LUNA16数据处理方式过于的繁琐&#xff0c;于是&#xff0c;本文就对LUNA16数据做一个新的整理&#xff0c;最终得到的数据和形式是差不多的。但是&#xff0c;主要不同的是代码逻辑比较的简单&#xff0c;便于理解。 对于数据集的学习&#xff0c;可以…...

硬件加速器及其深度神经网络模型的性能指标理解

前言&#xff1a; 现如今&#xff0c;深度神经网络模型和硬件加速器&#xff0c;如GPU、TPU等的关系可谓是“不分彼此”&#xff0c;随着模型参数的增加&#xff0c;硬件加速器成为了训练、推理深度神经网络不可或缺的一个工具&#xff0c;而近年来硬件加速器的发展也得益于加速…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...