浏览器控制台调试实用方法

许多程序员仅知道控制台的console.log,其实控制台API还包含一些其他实用方法,

这些方法在前端调试时会很有帮助。

目录

console.dir

查看对象属性和方法

输出DOM元素

 console.error

console.time和console.timeEnd

console.log

console.clear

 总结


console.dir

查看对象属性和方法

如果要查看所有对象的属性和方法,可以使用console.dir方法,直接将它们打印到控制台上。

代码示例:

<script src="./swiper-bundle.min.js"></script>
<script>var mySwiper = new Swiper ('.swiper', {loop: true, // 循环模式选项// 分页器bootstrap.min.csspagination: {el: '.swiper-pagination',},// 前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})console.dir(mySwiper);
</script>

效果:

输出DOM元素

还可以输出DOM元素。

 console.error

代码示例:

let flag = false
if (!flag) {console.error('似乎有什么错误!')
}
// 一切正常

console.error的好处是还可以提供栈追踪。

console.time和console.timeEnd

可以用来跟踪函数调用所消耗的时间,这对优化代码有一定帮助。

代码示例:

console.time();
let num = 0;
for (let i= 0; i < 100000000; i++) {num += i;
}
console.timeEnd()

跟踪代码执行消耗时间。

效果:

console.log

打印对象。在JavaScript中,所有的对象都拥有toString方法。当将一个对象传递给console.log时,它可以将其作为对象或字符串进行打印。

代码示例:

console.log(new Array())
console.log(typeof (new Array()))
console.log('1111')
console.log(typeof '1111')
console.log(1111)
console.log(typeof 1111)

效果:

console.clear

清空控制台,可以把之前的调试打信息清空掉。

代码示例:

console.time();
let num = 0;
for (let i= 0; i < 100000000; i++) {num += i;
}
console.timeEnd()console.log(num)console.clear();

效果:

 总结

开始说的很多程序员只知道console.log,我就属于这种的只知道console.log;

最近在看JavaScript手册,才知道还有其他调试方法,自己试了试感觉之后开发调试前端回很有帮助。

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

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

相关文章

Oracle切割字符串的方法,SQL语句完成。

Oracle用正则的方式循环切割字符串 需求&#xff1a;有一个这样子的 Str “‘CNJ-520-180500000001|CNJ-520-181200000001|CNJ-520-190300000001|CNJ-520-190100000001|CNJ-520-181200000002’” &#xff0c;然后我需要拿到每一个单号&#xff0c;每一个单号都要走一遍固定的…

Flask-SQLAlchemy

认识Flask-SQLAlchemy Flask-SQLAlchemy 是一个为 Flask 应用增加 SQLAlchemy 支持的扩展。它致力于简化在 Flask 中 SQLAlchemy 的使用。SQLAlchemy 是目前python中最强大的 ORM框架, 功能全面, 使用简单。 ORM优缺点 优点 有语法提示, 省去自己拼写SQL&#xff0c;保证SQL…

35_windows环境debug Nginx 源码-CLion配置CMake和启动

文章目录 生成 CMakeLists.txt 组态档35_windows环境debug Nginx 源码-CLion配置CMake和启动生成 CMakeLists.txt 组态档 修改auto目录configure文件,在 . auto/make 上边增加 . auto/cmake, 大概在 106 行。在 auto 目录下创建cmake 文件其内容如下: #!/usr/bin/env bash NG…

C++ string类详解

⭐️ string string 是表示字符串的字符串类&#xff0c;该类的接口与常规容器的接口基本一致&#xff0c;还有一些额外的操作 string 的常规操作&#xff0c;在使用 string 类时&#xff0c;需要使用 #include <string> 以及 using namespace std;。 ✨ 帮助文档&…

React入门 jsx学习笔记

一、JSX介绍 概念&#xff1a;JSX是 JavaScript XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在 JS 代码中书写 HTML 结构 作用&#xff1a;在React中创建HTML结构&#xff08;页面UI结构&#xff09; 优势&#xff1a; 采用类似于HTML的语法&#xff0c;降低学…

图神经网络 day2 图的分类

图神经网络基础算法 1 GCN2 GraphSAGE2.1 采样&#xff1a;采样固定长度的邻居2.2 聚合2.3 GraphSAGE_minibatch2.4 GraphSAGE_embedding 3 GAT4. 图网络的分类4.1 递归图神经网络 RGNN4.2 图卷积神经网络GCN4.3 图注意力网络 GAT4.4 图自动编码 GAE4.5 图时空网络 GSTN4.6 图生…

opencv-目标追踪

import argparse import time import cv2 import numpy as np# 配置参数 ap argparse.ArgumentParser() ap.add_argument("-v", "--video", typestr,help"path to input video file") ap.add_argument("-t", "--tracker", …

linux系统服务学习(六)FTP服务学习

文章目录 FTP、NFS、SAMBA系统服务一、FTP服务概述1、FTP服务介绍2、FTP服务的客户端工具3、FTP的两种运行模式&#xff08;了解&#xff09;☆ 主动模式☆ 被动模式 4、搭建FTP服务&#xff08;重要&#xff09;5、FTP的配置文件详解&#xff08;重要&#xff09; 二、FTP任务…

Git 设置代理

Git 传输分两种协议&#xff0c;SSH和 http(s)&#xff0c;设置代理也需要分两种。 http(s) 代理 Command Line 使用 命令行 模式&#xff0c;可以在Powershell中使用以下命令设置代理&#xff1a; $env:http_proxy"http://127.0.0.1:7890" $env:https_proxy&quo…

12-数据结构-数组、矩阵、广义表

数组、矩阵、广义表 目录 数组、矩阵、广义表 一、数组 二.矩阵 三、广义表 一、数组 这一章节理解基本概念即可。数组要看清其实下标是多少&#xff0c;并且二维数组&#xff0c;存取数据&#xff0c;要先看清楚是按照行存还是按列存&#xff0c;按行则是正常一行一行的去读…

【AIGC 讯飞星火 | 百度AI|ChatGPT| 】智能对比

AI智能对比 &#x1f378; 前言&#x1f37a; 概念类对比&#x1f375; 讯飞&#x1f375; 百度AI&#x1f375; chatGPT &#x1f379; 功能类对比☕ 讯飞☕ 百度AI☕ chatGPT &#x1f943; 可输入字数对比&#x1f964; 百度AI&#x1f964; 讯飞&#x1f964; chatGPT &…

认识Transformer:入门知识

视频链接&#xff1a; https://www.youtube.com/watch?vugWDIIOHtPA&listPLJV_el3uVTsOK_ZK5L0Iv_EQoL1JefRL4&index60 文章目录 Self-Attention layerMulti-head self-attentionPositional encodingSeq2Seq with AttentionTransformerUniversal Transformer Seq2Seq …

ansible入门

ansible入门 一.ansible 背景介绍 Ansible 是一个广受欢迎的 IT 自动化系统。可以用来处理配置管理、应用自动化部署、云资源配给、网络 自动化和多借点部署等任务。其也可以使得复杂的变更如带负载均衡的零停机滚动更新更加容易。Ansible.com 1.1 自动化运维概念 1.1.1 运维…

专业课只考2门,计算机学硕最低分290的江苏院校

南京工业大学 考研难度&#xff08;☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、专业目录、23复试详情、各专业考情分析。 正文1332字&#xff0c;预计阅读&#xff1a;3分钟。 2023考情概况 南京工业大学计算机相关各专业复试和…

超实用的批量管理工具 pssh 和 window 文件传输工具 pscp

文章目录 一、概述1&#xff09;pssh2&#xff09;pscp 二、pssh 工具安装三、pssh 命令的基本语法四、pscp 工具安装1&#xff09;Windows 上安装2&#xff09;Linux 系统上安装 五、 pscp 命令的基本语法1&#xff09;从 windows 向 linux 传文件2&#xff09;从 linux 传文件…

Golang协程,通道详解

进程、线程以及并行、并发 关于进程和线程 进程&#xff08;Process&#xff09;就是程序在操作系统中的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;进程是一个动态概念&#xff0c;是程序在执行过程中分配和管理资源的基本单位&#xff0c;每一…

在APP中如何嵌入小游戏?

APP内嵌游戏之所以能火爆&#xff0c;主要是因为互联网对流量的追求是无止境的&#xff0c;之前高速增长的红利期后&#xff0c;获取新的流量成为各大厂商的挑战&#xff0c;小游戏的引入&#xff0c;就是这个目的&#xff0c;为已有的产品赋能&#xff0c;抢占用户注意力和使用…

leetcode 139. 单词拆分

2023.8.18 本题可以看作完全背包问题&#xff0c;字符串s为背包&#xff0c;字符串列表worddict中的字符串为物品。由于本题的物品集合是排列问题(即物品的排列顺序对结果有影响)&#xff0c;所以遍历顺序为&#xff1a;先遍历背包再遍历物品。 接下来看代码&#xff1a; clas…

LVS-DR集群(一台LVS,一台CIP,两台web,一台NFS)的构建以及LVS-DR模式工作原理和特点

一.LVS-DR工作模式原理和特点 1.工作模式 2.模式特点 二.构建环境 1.五台关闭防火墙&#xff0c;关闭selinux&#xff0c;拥有固定IP&#xff0c;部署有http服务的虚拟机&#xff0c;LVS设备下载ipvsadm工具&#xff0c;NFS 设备需要下载rpcbind和nfs-utils 2.实现功能 3…

图数据库_Neo4j中文版_Centos7.9安装Neo4j社区版3.5.9_基于jdk1.8---Neo4j图数据库工作笔记0012

由于我们在国内使用啊,具体还是要用中文版滴,找了好久这个neo4j,原来还是有中文版的, https://we-yun.com/doc/neo4j-chs/ 中文版下载地址在这里: 所有版本都在这里了,需要哪个自己去下载就可以了,要注意下载以后,参考: https://we-yun.com/blog/prod-56.html 在这个位置下载…