JavaScript前端 console 控制台详细解析与代码实例
JavaScript Console(控制台)是一个重要的工具,可以用于调试和测试 JavaScript 代码。在浏览器中,你可以使用控制台来查看 JavaScript 输出、测试代码、调试错误等。在本文中,我们将详细介绍控制台的常用功能和代码实例。
打开控制台
在大多数主流浏览器中,你可以使用快捷键 F12 或者 Ctrl+Shift+I 来打开控制台。这里以 Chrome 浏览器为例。在 Chrome 中打开控制台的方法如下:
- 打开 Chrome 浏览器。
- 右键单击页面上的任何位置,然后选择“检查”。
- 在打开的窗口中,选择“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(控制台)是一个重要的工具,可以用于调试和测试 JavaScript 代码。在浏览器中,你可以使用控制台来查看 JavaScript 输出、测试代码、调试错误等。在本文中,我们将详细介绍控制台的常用功能和代码实例…...
idea中启动多例项目配置
多实例启动 日常本地开发微服务项目时,博主想要验证一下网关的负载均衡以及感知服务上下线能力时,需要用到多实例启动。 那么什么是多实例启动嘞?简单说就是能在本地同时启动多个同一服务。打个比方项目中有一个 MobileApplication 服务&…...
Activiti7流程结束监听事件中,抛出的异常无法被spring全局异常捕捉
ProcessRuntimeEventListener activiti7中,提供了ProcessRuntimeEventListener监听器,用于监听流程实例的结束事件 /*** 流程完成监听器*/ Slf4j Component public class ProcessCompleteListener implements ProcessRuntimeEventListener<ProcessC…...
Android 默认关闭自动旋转屏幕功能
Android 默认关闭自动旋转屏幕功能 接到客户邮件想要默认关闭设备的自动旋转屏幕功能,具体修改参照如下: /vendor/mediatek/proprietary/packages/apps/SettingsProvider/res/values/defaults.xml - <bool name"def_accelerometer_rotati…...
软文推广方案,媒介盒子分享
作为企业宣传的手段,它能用较低的成本获得较好的宣传效果,但有许多企业在进行软文推广时并不起效,这是因为没掌握好方法。今天媒介盒子就来告诉大家,通用的软文推广方案。 一、 明确推广目标以及受众 明确软文推广的目标有助于明…...
CSDN热榜分析6:将实时爬取的热榜数据导入sqlite
文章目录 初始化数据库接口更改数据库写入 初始化数据库 引入数据库的目的不止是为了存储,更多地也是为了便于查询,否则也没必要用一个Text控件来展示信息了。 所以一个正常的工作逻辑是,一打开热榜分析系统,也就同步打开数据库…...
2023年11月1日,Google全新域名来袭:.ing域名现已问世!
2023年11月1日(Oct31,2023美国与中国时差)Google宣布,正式推出.ing域名,这是一种新的顶级域名,旨在为用户提供更多的选择和创意。.ing域名是由Google和国际互联网名称与数字地址分配机构(ICANN)合作开发的,…...
【设计模式】第22节:行为型模式之“状态模式”
一、简介 状态模式一般用来实现状态机,而状态机常用在游戏、工作流引擎等系统开发中。不过,状态机的实现方式有多种,除了状态模式,比较常用的还有分支逻辑法和查表法。该模式允许对象内部状态改变使改变它的行为。 二、适用场景…...
JavaSE21——ArrayList
集合框架 ArrayList 一、概述 ArrayList 类是一个可以动态修改的数组,与普通数组的区别就是它是没有固定大小的限制,我们可以添加或删除元素。 ArrayList 继承了 AbstractList ,并实现了 List 接口。 ArrayList中的元素可以通过索引访问…...
找质数(枚举 埃氏筛 线性筛)
输入一个数,返回小于等于这个数的质数。 枚举法: 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 参数,通过该参数,可以控制将外部源导入 IRIS、控制代码的编译方式以…...
解决Windows Server 2012 由于没有远程桌面授权服务器可以提供需求可证
刚开始提示 之后就登录不了 (如下图提示) 由于windows server 2012 R2 安装了 远程桌面角色,但是这个角色是120天免费的,需要购买授权的。解决方法是取消/删除这个角色,就可以恢复正常的远程 一直下一步 远程桌面服…...
上位机底部栏 UI如何设置
上位机如果像设置个多页面切换: 位置: 代码如下: "tabBar": {"color": "black","selectedColor": "#d43c33","borderStyle":"black","backgroundColor": …...
MySQL表的增删改查(基础)
文章目录 一、CRUD二、新增(Create)2.1 单行数据全列插入2.2多行数据指定列插入 三、查询3.1 全列查询3.2 指定列查询3.3 查询字段表达式3.4 别名3.5 去重 DISTINCT3.6 排序3.7 条件查询 WHERE3.8 分页查询 LIMIT 四、修改(Update)…...
uniapp书写顶部选项卡代码详细例子
以下是一个基于uni-app框架,使用顶部选项卡的代码示例。 在页面的.vue文件中,添加一个uni-tab-bar组件,并在组件内部添加多个uni-tab-bar-item组件,来实现顶部选项卡的布局。 <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
标签的分类 关于标签我们可以分为 : 单标签:img, br hr 双标签:a,h,div 按照属性可分为: 块儿标签(自己独自占一行):h1-h6, p,div 行内(内联)标签(…...
【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割6(数据预处理)
由于之前哔站作者整理的LUNA16数据处理方式过于的繁琐,于是,本文就对LUNA16数据做一个新的整理,最终得到的数据和形式是差不多的。但是,主要不同的是代码逻辑比较的简单,便于理解。 对于数据集的学习,可以…...
硬件加速器及其深度神经网络模型的性能指标理解
前言: 现如今,深度神经网络模型和硬件加速器,如GPU、TPU等的关系可谓是“不分彼此”,随着模型参数的增加,硬件加速器成为了训练、推理深度神经网络不可或缺的一个工具,而近年来硬件加速器的发展也得益于加速…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么?它的作用是什么? Spring框架的核心容器是IoC(控制反转)容器。它的主要作用是管理对…...
【深度学习新浪潮】什么是credit assignment problem?
Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...
