浏览器开发者控制台使用入门

简介: 浏览器开发者控制台使用入门

640.png

开发者控制台


代码是很容易出现错误的。你也很可能犯错误...... 哦,我在说什么?只要你是人,你一定会犯错误(在写代码的时候),除非你是机器人[1]

但在浏览器中,默认情况下用户是看不到错误的。所以,如果脚本中有错误,我们看不到是什么错误,更不能够修复它。


为了发现错误并获得一些与脚本相关且有用的信息,浏览器内置了“开发者工具”。

通常,开发者倾向于使用 Chrome 或 Firefox 进行开发,因为它们有最好的开发者工具。一些其他的浏览器也提供开发者工具,有时还具有一些特殊的功能,通常它们都是在追赶 Chrome 或 Firefox。所以大多数人都有“最喜欢”的浏览器,当遇到某个浏览器独有的问题的时候,人们就会切换到其他的浏览器。


开发者工具很强大,功能丰富。首先,我们将学习如何打开它们,查找错误和运行 JavaScript 命令。


Google Chrome


打开网页 bug.html[2]

在 JavaScript 代码中有一个错误。一般的访问者看不到这个错误,所以让我们打开开发者工具看看吧。

按下 key:F12 键,如果你使用 Mac,试试 key:Cmd+Opt+J

开发者工具会被打开,Console 标签页是默认的标签页。

就像这样:

640.pngchrome

具体什么样,要看你的 Chrome 版本。它随着时间一直在变,但是都很类似。

  • 在这我们能看到红色的错误提示信息。这个场景中,脚本里有一个未知的 “lalala” 命令。
  • 在右边,有个可点击的链接 bug.html:12。这个链接会链接到错误发生的行号。

在错误信息的下方,有个 > 标志。它代表“命令行”,在“命令行”中,我们可以输入 JavaScript 命令,按下 key:Enter 来执行(key:Shift+Enter 用来输入多行命令)。

现在,我们能看到错误就够了。稍后,在 info:debugging-chrome 章节中,我们会重新更加深入地讨论开发者工具。


Firefox、Edge 和其他浏览器


大多数其他的浏览器都是通过 key:F12 来打开开发者工具。

他们的外观和感觉都非常相似,一旦你学会了他们中的一个(可以先尝试 Chrome),其他的也就很快了。


Safari


Safari(Mac 系统中的浏览器,Windows 和 Linux 系统不支持)有一点点不同。我们需要先开启“开发菜单”。

打开“偏好设置”,选择“高级”选项。选中最下方的那个选择框。

640.jpg

safari


现在,我们通过 key:Cmd+Opt+C 就能打开或关闭控制台了。另外注意,有一个名字为“开发”的顶部菜单出现了。它有很多命令和选项。


通常,当我们向控制台输入一行代码后,按 key:Enter,这行代码就会立即执行。

如果想要插入多行代码,请按 key:Shift+Enter 来进行换行。这样就可以输入长片段的 JavaScript 代码了。


总结


  • 开发者工具允许我们查看错误、执行命令、检查变量等等。
  • 在 Windows 系统中,可以通过 key:F12 开启开发者工具。Mac 系统下,Chrome 需要使用 key:Cmd+Opt+J,Safari 使用 key:Cmd+Opt+C(需要提前开启)。

现在我们的环境准备好了。下一章,我们将正式开始学习 JavaScript。

目录
相关文章
|
6月前
vue-cli 如何让Eslint 报错在浏览器控制台输出
vue-cli 如何让Eslint 报错在浏览器控制台输出
138 0
|
2月前
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
3天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
366 1
|
27天前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
12 0
|
3月前
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
4月前
|
机器人 Shell 开发者
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
5月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
118 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
5月前
|
存储 IDE C#
C#入门:在JetBrains Rider中创建.Net Framework控制台应用程序,输出“Hello, World!”
C#入门:在JetBrains Rider中创建.Net Framework控制台应用程序,输出“Hello, World!”
611 0
下一篇
无影云桌面