简单的console.log()案例

最新推荐文章于 2025-02-24 04:20:35 发布
最新推荐文章于 2025-02-24 04:20:35 发布
阅读量1k 收藏 1
点赞数
分类专栏： JavaScript 链接库 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46538844/article/details/132431057
版权
本文介绍了如何在JavaScript中使用console.log()方法在浏览器控制台显示变量值，以及如何通过F12开发者工具启用浏览器调试模式查看日志。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

console.log()

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h3>
      console表示控制台，log表示页面内容。合起来的意思就是在控制台中显示日志
    </h3>
    <p>
      浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击
      "Console" 菜单。
    </p>
    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>
  </body>
</html>

运行结果：

GEE： print 函数和 console.log 函数的区别
养乐多的博客
11-08 479
本文记录了 print() 函数和 console.log() 函数的区别。print 函数是 GEE 中的内置函数，可以打印各种数据类型，包括数字、字符串、图像、特征集等，主要目的是帮助你调试代码和查看输出结果，以便更好地理解代码。console.log() 是 JavaScript 中常用的函数，用于将信息输出到浏览器的开发者工具控制台，但是在 GEE 编辑器中使用 console.log() 只能输出一个参数，且按F12后并不能打印到浏览器控制台。详情请看本文案例。
JavaScript实现console.log输出不换行(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 2719
JavaScript实现console.log输出不换行(附完整源码)
Console.log对象显示
寒冰屋的专栏
09-10 2158
目录 介绍 使用代码 介绍 当我在一些javascript或web应用程序或其他任何东西中磨蹭的时候，我确信我像很多人一样，把console.log仍在代码中，这样我就可以看到各个阶段，或者什么函数正在接收，或者什么函数不在返回等等，并且可以跟踪控制台中正在发生的事情，因为我点击离开或做任何我正在写/测试的事情。 你在输出中看到了多少次[object Object]，你就像AAARGHH...
console.log-snippet:日志 -> console.log(); 崇高的文本片段
07-05
console.log-snippet 日志 -> console.log() | 崇高的文本片段 如何使用它？ 在 .js 文件或[removed]标签内写入log并按 Tab 键 log将替换为console.log(); 安装 将log.sublime-snippet文件放入 Sublime Text 用户设置文件夹 视窗 c:/Users/*username*/AppData/Roaming/Sublime Text 3/Packages/User 有关的 插件与此代码段配合得非常好
JavaScript基础——5. 控制台上输出的信息console.log（）
weixin_63215361的博客
02-24 315
console.log（）即控制台中写入日志-------console是控制的意思，log是日志的意思。// 可以接受任何字符串、数字和js对象，可以看到清楚的对象属性结构,不会阻塞程序的执行.// 在控制台上输出的信息,浏览器按下 F12 打开控制台,Console 即控制台。控制台直接打印了zxw内容，alert（）也同时运行，没有先后执行顺序关系。// console.log("我要自学网1");console.log（）不会阻塞程序的执行.
用console.log分析Vue源码
weixin_30741653的博客
12-20 165
前言 本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化. 控制台输出的效果图 请用chrome查看,并打开控制台看效果 演示地址 准备 vue-console.html的创建 下载vue.js文件,在vue-console.html中引入,我写了一个简单的例子,涵盖:初始化视图->点击后更新视图(包括各个钩子函数) ...
console.log(iVal)是什么？显示在哪里？
qq_27494201的博客
11-11 3491
1.是什么？ 两种含义： 1.终端的输入输出信息的记录日志 2.console.log()是用来调适javascript的 2.在哪里？ 拿谷歌浏览器来说，进入页面，然后按f12进入页面调试模式，里面有一个console选项，你点一下，就可以看到你console.log输出的内容了 ...
Nodejs源码分析之Console
leoleocs的专栏
01-06 2556
今天这里介绍一下Nodejs的Console的源码分析，具体的API文档可以参考https://nodejs.org/dist/latest-v5.x/docs/api/console.html下面就从具体的源码入手，解析一下Console功能的具体实现。 总体上来说，该源码实现相对简单，可以说是具体输出的封装，没有太多的内容，这里就将console的所有源代码分析如下：// 指示javascrip
在哪里可以看console.log的值？
weixin_40945354的博客
08-06 1661
<div id="app"> count: {{ count }} </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { count: 1 } }, created() { console.log('count is:
console.log打印：自定义样式（含源码、效果图）
草巾冒小子的博客
03-24 1346
console.log打印：自定义样式（含源码、效果图）效果图 · 示下：案例 · 代码如下：使用说明： 真的可以实现控制台打印出来的内容：有不同的font-size、不同的color、不同的渐变、不同的排版，等等。 效果图 · 示下： 案例 · 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="wid
const first = () => new Promise((resolve, reject) => { console.log(3); let p = new Promise((resolve, reject) => { console.log(7); setTimeout(() => { console.log(1); }, 0); setTimeout(() => { console.log(2); resolve(3); }, 0); resolve(4); }); resolve(2); p.then((arg) => { console.log(arg, 5); }); setTimeout(() => { console.log(6); }, 0); }); first().then((arg) => { console.log(arg, 7); setTimeout(() => { console.log(8); }, 0); }); setTimeout(() => { console.log(9); }, 0); console.log(10);
03-18
Promise.resolve().then(() => console.log('Promise')) 同步代码：console.log('End') 执行顺序应该是Start → End → Promise → Timeout。这里需要解释为什么Promise的回调先于setTimeout执行，因为微任务在宏...
7.1.10、迭代器遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费，原生具备 iterator 接口的数据：ArrayArgumentsSetMapStringTypedArrayNodeList注意：需要自定义遍历数据的时候，要想到迭代器工作原理：创建一个指针对象，指向当前数据结构的起始位置第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员每调用 next 方法返回一个包含 value 和 done 属性的对象案例演示：遍历数组//声明一个数组const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];//使用 for...of 遍历数组for (let v of xiyou) { console.log(v);}console.log("===============");//获取迭代器对象let iterator = xiyou[Symbol.iterator]();//调用对象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());12345678910111213141516案例演示：自定义遍历数据//声明一个对象const banji = { name: "五班", stus: [ "张三", "李四", "王五", "小六" ], [Symbol.iterator]() { //索引变量 let index = 0; let _this = this; return { next: function () { if (index < _this.stus.length) { const result = {value: _this.stus[index], done: false}; //下标自增 index++; //返回结果 return result; } else { return {value: undefined, done: true}; } } }; }}//遍历这个对象for (let v of banji) { console.log(v);}1234567891011121314151617181920212223242526272829303132337.1.11、生成器生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。7.1.11.1、生成器函数使用代码说明：* 的位置没有限制生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码next 方法可以传递实参，作为 yield 语句的返回值function * gen() { /*代码1开始执行*/ console.log("代码1执行了"); yield "一只没有耳朵"; /*代码2开始执行*/ console.log("代码2执行了"); yield "一只没有尾巴"; /*代码3开始执行*/ console.log("代码3执行了"); return "真奇怪";}let iterator = gen();console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log("===============");//遍历for (let v of gen()) { console.log(v);}123456789101112131415161718192021227.1.11.2、生成器函数参数function * gen(arg) { console.log(arg); let one = yield 111; console.log(one); let two = yield 222; console.log(two); let three = yield 333; console.log(three);}//执行获取迭代器对象let iterator = gen('AAA');console.log(iterator.next());//next方法可以传入实参console.log(iterator.next('BBB'));console.log(iterator.next('CCC'));console.log(iterator.next('DDD'));1234567891011121314151617187.1.11.3、生成器函数实例案例演示：1s后控制台输出 111，2s后输出 222，3s后输出 333function one() { setTimeout(() => { console.log(111); iterator.next(); }, 1000)}function two() { setTimeout(() => { console.log(222); iterator.next(); }, 2000)}function three() { setTimeout(() => { console.log(333); iterator.next(); }, 3000)}function * gen() { yield one(); yield two(); yield three();}//调用生成器函数let iterator = gen();iterator.next();123456789101112131415161718192021222324252627282930案例演示：模拟获取 ，用户数据 ，订单数据 ，商品数据function getUsers() { setTimeout(() => { let data = "用户数据"; iterator.next(data); }, 1000);}function getOrders() { setTimeout(() => { let data = "订单数据"; iterator.next(data); }, 1000);}function getGoods() { setTimeout(() => { let data = "商品数据"; iterator.next(data); }, 1000);}function * gen() { let users = yield getUsers(); console.log(users); let orders = yield getOrders(); console.log(orders); let goods = yield getGoods(); console.log(goods);}//调用生成器函数let iterator = gen();iterator.next();123456789101112131415161718192021222324252627282930313233
最新发布
04-06
console.log(iterator.next()); // 输出: { value: 'hello', done: false } ``` #### 如何创建生成器？ 生成器函数使用 `function*` 定义，在函数体内可以通过 `yield` 来暂停和恢复执行流程。每次调用生成器实例的...
浏览器console.log()
01-03
### 如何在浏览器中使用 `console.log` 进行调试 #### 使用场景 当需要快速查看变量的值或程序运行状态时，可以在代码的关键位置插入 `console.log()` 函数。这有助于理解代码执行流程和数据变化情况。 #### 基本...
javascript console.log 调试代码.
hjjdebug的专栏
08-06 266
javascript 一个小例子, 演示如何用console.log 调试代码. 重要的是要在浏览器中让它运行和打印. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> </head> <body> <p id="demo">haha</p> <but
VSCode中console.log的两种快速写法
热门推荐
记录和分享属于我的“IT”时光。
11-07 1万+
（一）方法一：直接在script标签中提前定义，仅适用于该html文件！ let add = function(a,b){ return a + b; }; console.log(add(20,300)); const { ['log']:C } = console; C(add(20,300)); （二）方法二：按tab键快速生成console.log，且光标在()内部,再次按tab键光标自动跳转到下一行！ 1、打开vscode编辑器，选择文件->首选项->用户片段，输入
console.log
finalfantasy
08-31 279
console.log支持的格式标志有:   1、console.log('%c测试内容','color:red;font-size:18px;') 输出:测试内容 2、console.log('%c测试内容，%c测试','color:red;font-size:18px;','color:black;font-size:18px;') 输出：测试内容，测试 转载自AlloyTea...
console.log()函数的使用和浏览器console的调出
lihanhan98的博客
10-30 4705
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l
【已解决】Chrome浏览器，控制台console.log()，打印数据显示...，点击...才能显示数据，如何直接显示？
Effotzjw_小白慢慢踏全栈
04-11 2731
问题： Chrome浏览器，控制台console.log()，打印数据显示…，点击…才能显示数据，如下图所示： 解决： 深拷贝一下输出，这就直接显示出来了。 console.log(res); 写法改为： console.log(JSON.parse(JSON.stringify(res))); ...
HTML控制台信息出现在页面里,我的console.log不能在我的HTML页面中工作
weixin_39716105的博客
06-03 550
我对JavaScript很陌生，但我无法前进学习，因为我的console.log不起作用在所有我会输入console.log消息和在我的html页面上没有任何显示。我试图调试它，但我是如此新，我不知道我所能做的就是去论坛，问，似乎有些人有问题，但没有好的答案。我已经尝试了每一件我知道该怎么做(这不是很多)，但没有任何作品请帮助！我的console.log不能在我的HTML页面中工作这是我的计划My...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值