javascript控制台_JavaScript控制台简介

javascript控制台

When it fails, JavaScript most often dies with barely a whimper. While this is generally a good thing – a failed script won’t usually blow up your page – it can also make finding JavaScript errors a frustrating and time-consuming exercise.

当它失败时，JavaScript几乎绝不会wh之以鼻。尽管这通常是一件好事-失败的脚本通常不会使您的页面崩溃，但它也会使查找JavaScript错误成为一件令人沮丧且耗时的工作。

In the early days of web development, bug tracking was often accomplished by inserting variable values in alert() windows, which would act as primitive indicators of script behaviour. Today, with many more scripts on web pages, we need much more powerful ways to write and test JavaScript. console, originally developed as part of the Firebug browser extension, now has its own API, and is invaluable for web developers at every skill level.

在Web开发的早期，错误跟踪通常是通过在alert()窗口中插入变量值来完成的，这些变量值可以作为脚本行为的原始指示。如今，随着网页上更多脚本的出现，我们需要更强大的方法来编写和测试JavaScript。 console最初是作为Firebug浏览器扩展的一部分开发的，现在拥有自己的API，对于每个技能水平的Web开发人员来说都是无价的。

调出控制台 (Bringing Up The console)

While every vendor supports it, the console looks slightly different from one browser to the next, and is reached in a slightly different way in each:

尽管每个供应商都支持它，但控制台在一个浏览器和另一个浏览器之间看起来略有不同，并且在每个浏览器中的访问方式都略有不同：

In Chrome: ⌘-Option-J

在Chrome中： ⌘-Option-J
In Firefox: ⌘-Shift-J

在Firefox中： ⌘-Shift-J
In Safari: Ensure that the Developer Menu option is on in Advanced Preferences; use ⌘-Option-C to bring up the console.

在Safari中：确保“ 高级偏好设置”中的“ 开发人员菜单”选项处于打开状态；使用⌘-Option-C打开控制台。

零件便签本，零件报告卡 (Part Scratchpad, Part Report Card)

The console fulfills many tasks. It is, among other things:

控制台执行许多任务。除其他外，它是：

An area for JavaScript to report errors JavaScript报告错误的区域
A “scratchpad” area to test code before implementation 在实现之前测试代码的“便签本”区域
A place for page scripts to output status and tracking information 页面脚本输出状态和跟踪信息的地方

I’ll discuss many more possible uses for console in future articles; for now, let’s take a quick look at the simplest of these features.

在以后的文章中，我将讨论console更多可能用途。现在，让我们快速看一下这些功能中最简单的功能。

Start up a console, load a basic valid HTML page, and type the following into the console window:

启动控制台，加载基本的有效HTML页面，然后在控制台窗口中键入以下内容：

document.body

Note that the console returns to you the body element, including all of its markup and text. An empty document would return:

请注意，控制台将向您返回body元素，包括其所有标记和文本。空文档将返回：

<body></body>

Now let’s take it a little further:

现在让我们更进一步：

document.body.style.backgroundColor = "red";

Note that this immediately changes the background of the page: you’re using JavaScript to directly write CSS in real time. Neat, huh?

请注意，这会立即更改页面背景：您正在使用JavaScript实时直接编写CSS 。整洁吧？

For extra insight, flip to the Elements view and take a closer look at the <body> element in the DOM after taking this step.

要获得更多信息，请转到“元素”视图，并在执行此步骤之后仔细查看DOM中的<body>元素。

Used in this way, the console becomes an excellent tool for playing with and learning JavaScript. Of course, all of this code, and any effect associated with it, disappears as soon as you refresh the page. We’ll look at using the console for working with real scripts on pages next.

以这种方式使用，控制台成为玩耍和学习JavaScript的绝佳工具。当然，刷新页面后，所有这些代码以及与之相关的任何效果都会消失。接下来，我们将在控制台上使用控制台来处理真实脚本。

错误捕捉 (Error Catching)

Used as a catchment for errors, the console becomes even more useful. For example, write a script directly on a web page:

用作错误的收集器，控制台变得更加有用。例如，直接在网页上编写脚本：

artists = ["Daft Punk","DJ Shadow","Amon Tobin"];
artists.push("Front Line Assembly");
console.log("The artists array contains " + artists.length + " elements");

Load the page, and switch to the console window. With console.log() you can “echo out” any variable, or the result of any action.

加载页面，然后切换到控制台窗口。使用console.log()您可以“回显”任何变量或任何操作的结果。

You can use the console for a lot more than these simple tasks, but I hope this will provide a good start for beginners.

除了这些简单的任务，您还可以使用控制台进行更多操作，但是我希望这将为初学者提供一个良好的开端。

翻译自: https://thenewcode.com/767/Introducing-the-JavaScript-console

javascript控制台