如何充分利用 JavaScript 控制台 #1805

sunui · 2017-06-24T12:08:47Z

reid3290 · 2017-06-25T01:07:52Z

linhe0x0 · 2017-06-25T01:07:55Z

@reid3290 好的呢 🍺

reid3290 · 2017-06-25T02:43:38Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


-These visual differences help when you need to identify any errors or warnings in the console at a quick glance. You would want to make sure that they are removed for production-ready apps, unless they are there to warn other developers that they are doing something wrong with your code.
+你可能注意到了 error 日志消息 —— 它比其他消息更显眼。它显示着红色的背景和[堆栈跟踪](https://en.wikipedia.org/wiki/Stack_trace)，而 `info` 和 `warn` 就不会。尽管在 Chrome 中 `warn` 确实有一个黄色的背景。


尽管 => 但是

reid3290 · 2017-06-25T02:46:47Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md

@@ -149,25 +151,25 @@ Successful bears and failing bats
    console.error('%c /dancing/bats failed!', failure);
    console.log('/dancing/bats Does not exist');

-You apply CSS rules in the string substitution with the `%c` placeholder.
+在字符串替换中使用 `%c` 占位符有应用你的样式规则。


有应用你的样式规则 => 来应用你的样式规则

reid3290 · 2017-06-25T02:47:01Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


    console.error('%c /dancing/bats failed!', failure);

-Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one `%c` into the string as well.
+然后把你的 CSS 元素作为参素，你就能看到应用 CSS 的日志了。 你也可以给你的字符串添加多个 `%c`。


参素 => 参数

reid3290 · 2017-06-25T02:49:59Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


-There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.
+我们已经更深入的了解了 console 对象以及其中附带的其他一些方法。当我们需要调试代码时，这些方法是可用的好工具。


更深入的 => 更深入地

reid3290 · 2017-06-25T02:51:12Z

@sunui 校对完成

aladdin-add · 2017-06-25T05:13:13Z

@sqrthree 校对认领。

linhe0x0 · 2017-06-25T05:13:21Z

@aladdin-add 妥妥哒 🍻

aladdin-add · 2017-06-25T05:17:29Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


-The `console` object gives you access to the browser’s console. It lets you output strings, arrays, and objects that help debug your code. The `console` is part of the `window` object, and is supplied by the [Browser Object Model (BOM)](https://www.w3schools.com/js/js_window.asp).
+`console` 对象允许您访问浏览器的控制台。它允许你输出有助于调试代码的字符串、数组和对象。`console` 是 `window` 对象的一部分，由[浏览器对象模型(BOM)](https://www.w3schools.com/js/js_window.asp)提供。


console 是 window 对象的一部分

翻译为：console 是 window 对象的属性，更好一些？

aladdin-add · 2017-06-25T05:23:49Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


-### String Substitutions
+视觉上的区分有助于你在控制台快速浏览辨别出错误或警告信息。你将想要确保在准备生产的应用中移除它们，除非你打算让它们来警示其他操作你的代码的开发者。


你将想要确保在准备生产的应用中移除它们

你应该确保在准备生产的应用中移除它们

aladdin-add · 2017-06-25T05:30:16Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


    console.dir(document.body);

 ![](https://cdn-images-1.medium.com/max/800/1*4Zj5EuPTHcQH5-K0NWHb7g.png)

-Chrome displays dir differently
-Ultimately, `dir` only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.
+Chrome 会显示不同的目录


Chrome 会显示不同的目录

感觉目录不是很清楚，-> Chrome 会显示不同的层级?

嗯嗯可以呀

aladdin-add · 2017-06-25T05:39:57Z

TODO/how-to-get-the-most-out-of-the-javascript-console.md


 1. `window.console.log('This works')`
 2. `console.log('So does this')`

-The second option is basically a reference to the former, so we’ll use the latter to save keystrokes.
+第二个选项基本上是对前者的引用，所以我们使用后者以精简代码。


第二个选项基本上是对前者的引用

基本上 -> 本质上

aladdin-add · 2017-06-25T05:41:21Z

@sunui @sqrthree 校对完成。

sunui · 2017-06-25T12:15:16Z

@sqrthree 修改完成啦

linhe0x0

很棒

linhe0x0 · 2017-06-26T10:25:48Z

@sunui 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

如何充分利用 JavaScript 控制台翻译初稿

9efd637

linhe0x0 added the 校对认领 label Jun 24, 2017

linhe0x0 mentioned this pull request Jun 24, 2017

如何充分利用 JavaScript 控制台 #1798

Closed

linhe0x0 added the 正在校对 label Jun 25, 2017

reid3290 reviewed Jun 25, 2017

View reviewed changes

linhe0x0 removed the 校对认领 label Jun 25, 2017

aladdin-add reviewed Jun 25, 2017

View reviewed changes

根据校对意见修改

681252c

aladdin-add approved these changes Jun 25, 2017

View reviewed changes

linhe0x0 approved these changes Jun 26, 2017

View reviewed changes

linhe0x0 added 翻译完成 and removed 正在校对 labels Jun 26, 2017

linhe0x0 merged commit 03e7068 into xitu:master Jun 26, 2017

sunui deleted the translate branch June 27, 2017 09:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

如何充分利用 JavaScript 控制台 #1805

如何充分利用 JavaScript 控制台 #1805

sunui commented Jun 24, 2017

reid3290 commented Jun 25, 2017

linhe0x0 commented Jun 25, 2017

reid3290 Jun 25, 2017

reid3290 Jun 25, 2017

reid3290 Jun 25, 2017

reid3290 Jun 25, 2017

reid3290 commented Jun 25, 2017

aladdin-add commented Jun 25, 2017

linhe0x0 commented Jun 25, 2017

aladdin-add Jun 25, 2017

aladdin-add Jun 25, 2017

aladdin-add Jun 25, 2017

sunui Jun 25, 2017

aladdin-add Jun 25, 2017

aladdin-add commented Jun 25, 2017

sunui commented Jun 25, 2017

linhe0x0 left a comment

linhe0x0 commented Jun 26, 2017


		These visual differences help when you need to identify any errors or warnings in the console at a quick glance. You would want to make sure that they are removed for production-ready apps, unless they are there to warn other developers that they are doing something wrong with your code.
		你可能注意到了 error 日志消息 —— 它比其他消息更显眼。它显示着红色的背景和[堆栈跟踪](https://en.wikipedia.org/wiki/Stack_trace)，而 `info` 和 `warn` 就不会。尽管在 Chrome 中 `warn` 确实有一个黄色的背景。


		There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.
		我们已经更深入的了解了 console 对象以及其中附带的其他一些方法。当我们需要调试代码时，这些方法是可用的好工具。


		The `console` object gives you access to the browser’s console. It lets you output strings, arrays, and objects that help debug your code. The `console` is part of the `window` object, and is supplied by the [Browser Object Model (BOM)](https://www.w3schools.com/js/js_window.asp).
		`console` 对象允许您访问浏览器的控制台。它允许你输出有助于调试代码的字符串、数组和对象。`console` 是 `window` 对象的一部分，由[浏览器对象模型(BOM)](https://www.w3schools.com/js/js_window.asp)提供。


		### String Substitutions
		视觉上的区分有助于你在控制台快速浏览辨别出错误或警告信息。你将想要确保在准备生产的应用中移除它们，除非你打算让它们来警示其他操作你的代码的开发者。

如何充分利用 JavaScript 控制台 #1805

如何充分利用 JavaScript 控制台 #1805

Conversation

sunui commented Jun 24, 2017

reid3290 commented Jun 25, 2017

linhe0x0 commented Jun 25, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

reid3290 commented Jun 25, 2017

aladdin-add commented Jun 25, 2017

linhe0x0 commented Jun 25, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aladdin-add commented Jun 25, 2017

sunui commented Jun 25, 2017

linhe0x0 left a comment

Choose a reason for hiding this comment

linhe0x0 commented Jun 26, 2017