03 JavaScript学习:浏览器中执行 JavaScript

我比较习惯Chrome浏览器。

Chrome 是由 Google 开发的免费网页浏览器,调试代码非常方便。

Chrome 官网地址:https://www.google.com/intl/zh-CN/chrome/。

控制台输出

浏览器的控制台是开发者工具中的一个重要组成部分,它可以用来查看网页的错误、警告、调试信息以及执行JavaScript代码等。下面我会详细解释一下控制台的常见输出信息,并举例说明:

  1. 错误信息(Errors):显示网页加载过程中发生的错误,例如资源加载失败、JavaScript语法错误等。这些错误可能会影响网页的正常运行。

    举例:在控制台中出现"Uncaught ReferenceError: functionA is not defined",这表示在JavaScript代码中引用了未定义的函数functionA。

  2. 警告信息(Warnings):显示网页中的警告信息,例如过期的API使用、潜在的性能问题等。虽然不会导致程序崩溃,但也需要引起开发者的关注。

    举例:警告提示"Resource interpreted as Stylesheet but transferred with MIME type text/plain",表示浏览器将某个资源当作样式表加载,但服务器返回的MIME类型却是text/plain,可能会导致样式无法正确应用。

  3. 信息消息(Logs):显示开发者或网页本身输出的信息,例如调试信息、状态信息等。开发者可以使用console.log()函数输出自定义信息。

    举例:网页中使用console.log(“Page loaded successfully”),则在控制台中会显示"Page loaded successfully"。

  4. 网络请求信息(Network Requests):展示网页加载时发送和接收的网络请求信息,包括请求URL、请求方法、状态码、耗时等。

    举例:显示网页加载时向服务器请求了图片、CSS文件和JavaScript文件的信息,以及每个请求的详细信息和耗时情况。

  5. 其他信息(Others):包括其它类型的输出信息,例如对DOM操作的记录、性能跟踪信息等。

通过查看控制台输出信息,开发者可以及时发现和解决网页中的问题,从而提高网页性能和用户体验。

打开浏览器控制台的步骤

要使用F12键在Chrome浏览器中打开控制台,可以按照以下步骤进行:

  1. 打开Chrome浏览器,在网页上任意位置按下F12键(或者Fn + F12,取决于你的键盘设置)。

  2. 或者你也可以点击Chrome浏览器右上角的菜单按钮(三个点),选择“更多工具”,然后选择“开发者工具”。
    在这里插入图片描述

  3. 在弹出的开发者工具面板中,你会看到多个选项卡(Elements、Console、Sources等),选择“Console”选项卡即可进入控制台页面。

  4. 现在你就可以在控制台中查看网页的错误、警告、调试信息以及执行JavaScript代码了。

通过按下F12键或通过菜单选项来打开控制台,你可以方便地进行网页的调试和分析工作。

用浏览器的Console 窗口调试 JavaScript 代码

当你在浏览器的Console窗口中调试JavaScript代码时,可以执行简单的代码,并查看输出结果。以下是一个示例:

假设你想计算1到10的所有整数的和。你可以这样做:

  1. 打开浏览器,按下快捷键Ctrl+Shift+I(Windows/Linux系统)或Cmd+Option+I(Mac系统)来打开开发者工具。
  2. 切换到Console选项卡。
  3. 输入以下代码并按下回车执行:
let sum = 0;
for (let i = 1; i <= 10; i++) {sum += i;
}
console.log("1到10的整数和为:" + sum);

执行上述代码后,你将会在Console窗口中看到输出结果:“1到10的整数和为:55”。
在这里插入图片描述

这就是在浏览器的Console窗口中调试JavaScript代码的一个简单示例。你可以在Console中执行各种JavaScript代码,并实时查看执行结果,以便进行调试、测试和验证。

Chrome snippets 小脚本(感觉很鸡肋)

我们也可以在 Chrome 浏览器中创建一个脚本来执行,在开发者工具中点击 Sources 面板,选择 Snippets 选项卡,在导航器中右击鼠标,然后选择 Create new snippet 来新建一个脚本文件:

在这里插入图片描述

如果你没看到 Snippets ,可以点下面板上到 >> 就能看到了。
在这里插入图片描述

点击 Create new snippet 后,会自动创建一个文件,你只需在右侧窗口输入以下代码,然后按 Command+S(Mac)或 Ctrl+S(Windows 和 Linux)保存更改即可。

console.log(“runoob-1”)
console.log(“runoob-2”)
保存后,右击文件名,选择 “Run” 执行代码:

在这里插入图片描述

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

在这里插入图片描述

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

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

相关文章

【氮化镓】GaN HEMT失效物理和可靠性

概述: 本文是一篇关于AlGaN/GaN基高电子迁移率晶体管(HEMTs)的失效物理和可靠性研究的综述文章,发表在2013年10月的《IEEE Transactions on Electron Devices》上。文章由Enrico Zanoni等人撰写,主要关注了影响栅极边缘和肖特基结的失效机制,并探讨了提高这些器件可靠性…

springboot的开发流程

文章目录 springboot的开发流程 1.创建maven项目2.引用依赖 1&#xff09;起步依赖2&#xff09;项目依赖3.启动类4.配置文件5.业务代码 1)dto2)controller6.restful测试7.部署 1&#xff09;打包2&#xff09;部署 springboot的开发流程 1.创建maven项目 新建maven项目 配置…

若依框架后台管理系统_修改后台管理密码

若依框架后台管理系统_修改后台管理密码 1. 找见加密函数&#xff1a; /*** 生成BCryptPasswordEncoder密码** param password 密码* return 加密字符串*/public static String encryptPassword(String password){BCryptPasswordEncoder passwordEncoder new BCryptPasswordE…

linux 的Jdk1.8详细安装部署教程

一、环境准备 1.下载安装包 下载地址&#xff0c;这是1.8的你也可以选择安装别的版本的 https://www.oracle.com/java/technologies/downloads/#java8-windows 选择想要的系统和对应的位数&#xff0c;点击下载即可 2.上传安装包 选择自己要安装的路径&#xff0c;&#x…

软阈值函数的应用实例!

让我们通过一个简单的例子来展示软阈值的功能。 假设我们有一个包含一些信号的向量 ( x )&#xff0c;如下所示&#xff1a; [ x [3, -2, 5, -1, 7, -4, 2, 0] ] 现在&#xff0c;我们希望对这个信号进行软阈值处理&#xff0c;以去除幅值较小的分量&#xff0c;并减少噪音。…

Feign的使用

目录 一.概念 二.使用 2.1依赖 2.2启动类注释 2.3.创建service包&#xff0c;写接口 2.4.生产者方法 2.5效果 三.openfeign的服务降级 3.1理论 3.2使用 一.概念 Feign是Spring Cloud提供的声明式、模板化的HTTP生产者&#xff0c;它使得调用远程服务就像调用本地服…

创建SpringBoot控制台程序并打包运行(Windows)

1. 新建一个Springboot项目Study (PS&#xff1a; 这个不需要演示了吧?) 注意pom.xml&#xff0c;是spring-boot-starter&#xff0c;不是spring-boot-web-starter <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

蓝桥杯备赛(C/C++组)

README&#xff1a; 本笔记是自己的备考笔记&#xff0c;按照官网提纲进行复习&#xff01;适合有基础&#xff0c;复习用。 一、总考点 试题考查选手解决实际问题的能力&#xff0c;对于结果填空题&#xff0c;选手可以使用手算、软件、编程等方法解决&#xff0c;对于编程大…

BTP连接cloud connector中配置的SAP

登录地址 登录之后可以看到我们已经配置成功的后端系统SAP。 从cloud connector中获取location ID ,然后在BTP中配置Destination 选择目标标签页&#xff0c;点击‘新建目标’&#xff0c;如下图&#xff1a; 新建连接 暂时不知道错误原因 创建目标-HTTP  新建目标&…

软考134-上午题-【软件工程】-进度管理

一、甘特图&#xff08;了解&#xff09; 1-1、定义 Gantt图是一种简单的水平条形图&#xff0c;它以日历为基准描述项目任务。 水平轴表示日历时间线(如时、天、周、月和年等)&#xff0c;每个条形表示一个任务&#xff0c;任务名称垂直地列在左边的列中&#xff0c;图中水…

DIY mybatisPlus的分页插件

目录 起因修改定义接口重写MyPage的方法 实践测试 起因 在我们通过list返回的列表页&#xff0c;出现了一个需要数据合计的需求&#xff0c;例如一个订单1块钱&#xff0c;那么所有订单加起来多少钱&#xff0c;那么list一般都通过分页返回&#xff0c;而统计所有订单又不能只…

量化研究---小果因子分析系统使用教程,可转债macd因子为例子

文章链接 量化研究---小果因子分析系统使用教程&#xff0c;可转债macd因子为例子 (qq.com) 因子分析是一种多维变量统计分析方法&#xff0c;用于从多个变量中提取少数公共因子。 具体来说&#xff0c;因子分析的核心目的是通过研究变量之间的相关性&#xff0c;将多个相关联…

Spring 事务 (编程式 声明式, Spring 事务传播机制)

事务 事务是一组操作的集合, 是一个不可分割的整体 事务会把所有的操作作为一个整体, 一起向数据库提交或是撤销操作请求. 所以这组操作要么同时成功, 要么同时失败 Spring 中事务的实现 编程式 (手动写代码操作事务)声明式 (通过注解自动开启和提交事务) 编程式事务 开启事务 …

Module外贸主题开心版下载-v5.7.0版本WordPress企业模板

主题下载地址&#xff1a;Module外贸主题开心版下载-v5.7.0版本 Module主题介绍&#xff1a;采用全新模块化开发&#xff0c;首页模块可视化拖拽自由组合&#xff0c;可自定义搭建出不同行业适用的企业网站。同时主题全面支持WPML多语言切换&#xff0c;可轻松搭建外贸网站。W…

torchEEG工具箱

文章信息: 题目&#xff1a;TorchEEGEMO&#xff1a;基于脑电图的情绪识别深度学习工具箱 期刊&#xff1a;Expert Systems with Applications 环境&#xff1a;pytorch 1.11.0 CUDA 11.3 摘要&#xff1a; ​ 一个python工具箱TorchEEG&#xff0c;将工作流程分为五个模块…

学习STM32第十六天

RTC实时时钟 一、简介 RTC是一个独立的BCD格式定时器&#xff0c;提供一个时钟日历&#xff0c;两个可编程报警中断&#xff0c;一个具有中断功能周期性可编程唤醒标志&#xff0c;RTC和时钟配置系统处于后备区域。 通过两个32位寄存器以BCD格式实现秒、分钟、小时&#xff08…

OKCC搭建配置什么样的服务器合适

OKCC呼叫中心系统是一种采用软硬件结合的架构方式、及分布式的IP技术&#xff0c;从多角度为企业提供整合的一体化解决方案。因此&#xff0c;搭建OKCC呼叫中心系统所使用的服务器应该满足以下几点要求&#xff1a; 稳定性&#xff1a;服务器需要具有较高的稳定性和可靠性&…

STM32之不使用MicroLIB

一、microlib介绍 microlib 是缺省 C 库的备选库,功能上不具备某些 ISO C 特性。 microlib 进行了高度优化以使代码变得很小,功能比缺省 C 库少,用于必须在极少量内存环境下运行的深层嵌入式应用程序。 二、不使用microlib的原因 由于microlib不支持C++开发,因此在使用C…

element plus el-date-picker type=“datetime“ 限制年月日 时分秒选择

如何限制el-date-picker组件的时分秒选中&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 文档 文档在这里&#xff1a;DateTimePicker 日期时间选择器 | Element Plus 它提供的disabled-date给我们来限制日期选择 nice&#xff01;&…

2024年3月洗衣机大家电线上电商(京东天猫淘宝)销量排行榜

鲸参谋监测的线上电商&#xff08;京东天猫淘宝&#xff09;平台3月份的洗衣机大家电销售数据已出炉&#xff01; 根据鲸参谋数据显示&#xff0c;今年3月份&#xff0c;线上电商平台洗衣机的销量累计约224万件&#xff0c;环比增长了29%&#xff0c;环比增长了约29%&#xff…