14 个你可能不知道的 JavaScript 调试技巧 #2404

ParadeTo · 2017-11-04T07:46:53Z

译文翻译完成，resolve #2397

ParadeTo · 2017-11-04T07:47:54Z

@leviding 完成翻译

Yuuoniy · 2017-11-04T10:52:01Z

认领校对

fanyijihua · 2017-11-04T10:52:05Z

@Yuuoniy 好的呢 🍺

Yuuoniy · 2017-11-04T10:57:32Z

12-24 行译文和原文没有对应，能不能先调整一下

Yuuoniy · 2017-11-04T11:07:45Z

TODO/javascript-debugging-tips.md


-Sometimes, you have a complex set of objects that you want to view. You can either console.log them and scroll through the list, or break out the console.table helper. Makes it easier to see what you’re dealing with!
+有些时候，你想查看一组复杂的对象。你可以用 console.log 打印并滚动查看，或者
+使用 console.table 来更加轻松地查看你所处理的对象。


”或者“和”使用“ 中间多了一个回车吧。

Yuuoniy · 2017-11-04T11:11:55Z

TODO/javascript-debugging-tips.md


-While having every single mobile device on your desk would be awesome, it’s not feasible in the real world. How about resizing your viewport instead? Chrome provides you with everything you need. Jump into your inspector and click the **‘toggle device mode’** button. Watch your media queries come to life!
+拥有所有的移动设备这个想法是很美妙的，但是现实中是不可能的。不如取而代之，改变视口吧？ Chrome 提供了所有你需要的东西。打开你的调试器并点击 **"toggle device mode"** 按钮。你会看到媒体查询出现啦！


？ Chorme 之间多了空格。
全角标点与其他字符之间不加空格

Yuuoniy · 2017-11-04T11:12:30Z

TODO/javascript-debugging-tips.md


-Mark a DOM element in the elements panel and use it in your console. Chrome Inspector keeps the last five elements in its history so that the final marked element displays with $0, the second to last marked element $1 and so on.
+在 elements 面板中标记一个 DOM 元素，然后在 console 中使用它。 Chrome Inspector 会保存最后 5 个元素在其历史记录中，所以最后标记的元素可以用 $0 来显示，倒数第二个被标记的元素为 $1 ，以此类推。


。 Chrome Inspector

。后多了空格

Yuuoniy · 2017-11-04T11:20:58Z

TODO/javascript-debugging-tips.md


-If you mark following items in order ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ then you can access the DOM nodes like this in the console:
+如果你以 “item-4”, “item-3”, “item-2”, “item-1”, “item-0” 的顺序标记下面的这些元素，你可以像下图所示那样在 console 中访问这些 DOM 节点

 [![](https://raygun.com/upload/Debugging%202.png)](https://raygun.com/upload/Debugging%202.png)


开头多了 '[' 下面也出现多次这样的情况

并不影响图片的显示

Yuuoniy · 2017-11-04T11:29:17Z

TODO/javascript-debugging-tips.md


-What’s probably less common is to use the console. Use debug(funcName) in the console and the script will stop when it reaches the function you passed in.
+可能比较少的方式是使用 console。 在 console 中使用 debug(funcName)，脚本会在运行到你传入的函数的时候停止。


可能比较少的方式是使用 console。 =》可能不常见的方式是使用 console。

Yuuoniy · 2017-11-04T11:34:14Z

TODO/javascript-debugging-tips.md


-In more complex debugging we sometimes want to output many lines. One thing you can do to keep a better structure of your outputs is to use more console functions, for example, Console.log, console.debug, console.warn, console.info, console.error and so on. You can then filter them in your inspector. But sometimes this is not really what you want when you need to debug JavaScript. It’s now that YOU can get creative and style your messages. Use CSS and make your own structured console messages when you want to debug JavaScript:
+在更复杂的调试中我们有时想输出很多行。为了使你的输出保持更好的结构，你可以使用更多的 console 方法，如：console.log，console.debug，console.warn，console.info，console.error 等。然后，你还可以在调试器中过滤他们。但是有时当你调试 JavaScript 时，这并不是你真正想要的。现在，你可以给你的信息添加点创意和样式了。你可以使用 CSS 并制定你自己的 console 输出格式：


我觉得 console.debug，console.warn 这之间用半角符号更合适

Yuuoniy · 2017-11-04T11:40:21Z

TODO/javascript-debugging-tips.md


-A faster way to do a querySelector in the console is with the dollar sign. $(‘css-selector’) will return the first match of CSS selector. $(‘css-selector’) will return all of them. If you are using an element more than once, it’s worth saving it as a variable.
+在 console 中执行 querySelector 的一个更快的办法是使用 dollar 符号。$('css-selector') 会返回 CSS 选择器所匹配的第一个元素。$$(‘css-selector’) 会返回所有的元素。如果你要不止一次地使用该元素，最好是把它作为变量缓存起来。


感觉 dollar 用 $ 代替更好，不然就翻译成美元吧

laampui · 2017-11-04T13:07:37Z

校对认领

fanyijihua · 2017-11-04T13:07:40Z

@lampui 妥妥哒 🍻

laampui

@ParadeTo 校对完毕

laampui · 2017-11-04T13:38:52Z

TODO/javascript-debugging-tips.md


-A faster way to do a querySelector in the console is with the dollar sign. $(‘css-selector’) will return the first match of CSS selector. $(‘css-selector’) will return all of them. If you are using an element more than once, it’s worth saving it as a variable.
+在 console 中执行 querySelector 的一个更快的办法是使用 dollar 符号。$('css-selector') 会返回 CSS 选择器所匹配的第一个元素。$$(‘css-selector’) 会返回所有的元素。如果你要不止一次地使用该元素，最好是把它作为变量缓存起来。


$$(‘css-selector’) 会返回所有的元素

多了一个美元符号

可以查看原文，原文是有的

laampui · 2017-11-04T13:48:53Z

TODO/javascript-debugging-tips.md


-It’s quick, but the downside is it doesn’t work on private or anonymous functions. But if that’s not the case, it’s probably the fastest way to find a function to debug. (Note: there’s a function called console.debug which is not the same thing.)
+这种方式比较快，缺点是对私有和匿名函数无效。但是，如果排除这些情形的话，这可能是最快的定位要调试函数的方法。


这可能是最快的定位要调试函数的方法。

这可能是定位要调试函数的最快方法。

laampui · 2017-11-04T13:54:29Z

TODO/javascript-debugging-tips.md


 [![](https://raygun.com/upload/Debugging%204.png)](https://raygun.com/upload/Debugging%204.png)

-Now we can see that **func1** called **func2, **which called **func4**. **Func4** thencreated an instance of **Car** and then called the function **car.funcX**, and so on.
+现在我们知道 **func1** 调用了 **func2** ， **它又调用了func4** 。 **func4** 接着创建了一个 **Car** 的实例并调用了 **car.funcX** ， 等等。


等等前面多了一个空格

laampui · 2017-11-04T13:56:52Z

TODO/javascript-debugging-tips.md


 [![](https://raygun.com/upload/Debugging%204.png)](https://raygun.com/upload/Debugging%204.png)

-Now we can see that **func1** called **func2, **which called **func4**. **Func4** thencreated an instance of **Car** and then called the function **car.funcX**, and so on.
+现在我们知道 **func1** 调用了 **func2** ， **它又调用了func4** 。 **func4** 接着创建了一个 **Car** 的实例并调用了 **car.funcX** ， 等等。


func2* ， 它又调用了func4 。 func4 接着创建
逗号后面多了一个空格；”了“字后面加个空格，句号后面删一个空格

laampui · 2017-11-04T13:59:09Z

TODO/javascript-debugging-tips.md

+
+## 1. "debugger;"
+
+除了 console.log， “debugger;” 是我最喜欢的临时应急的调试工具。一旦它在你的代码中出现，Chrome 会自动地在执行到它所在位置时停下。你甚至可以将它放在条件语句中，只在你需要的时候运行。


我最喜欢的临时应急的调试工具

我最喜欢的临时应急调试工具

ParadeTo · 2017-11-05T14:10:30Z

@leviding 修改完成

leviding · 2017-11-07T02:11:53Z

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

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

* 完成翻译 * 根据校对修改 * 添加校对者

完成翻译

b28ca9c

fanyijihua added the 校对认领 label Nov 4, 2017

fanyijihua mentioned this pull request Nov 4, 2017

14 个你可能不知道的 JavaScript 调试技巧 #2397

Closed

fanyijihua added the 正在校对 label Nov 4, 2017

Yuuoniy reviewed Nov 4, 2017

View reviewed changes

fanyijihua removed the 校对认领 label Nov 4, 2017

laampui reviewed Nov 4, 2017

View reviewed changes

leviding added the 前端 label Nov 5, 2017

ParadeTo added 2 commits November 5, 2017 22:05

根据校对修改

2c045f9

添加校对者

62a9734

leviding approved these changes Nov 7, 2017

View reviewed changes

leviding merged commit 4055e72 into xitu:master Nov 7, 2017

cdadar pushed a commit to cdadar/gold-miner that referenced this pull request Dec 8, 2017

14 个你可能不知道的 JavaScript 调试技巧 (xitu#2404)

9810bc5

* 完成翻译 * 根据校对修改 * 添加校对者

leviding added 翻译完成 and removed 正在校对 labels Dec 19, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

14 个你可能不知道的 JavaScript 调试技巧 #2404

14 个你可能不知道的 JavaScript 调试技巧 #2404

ParadeTo commented Nov 4, 2017

ParadeTo commented Nov 4, 2017

Yuuoniy commented Nov 4, 2017

fanyijihua commented Nov 4, 2017

Yuuoniy commented Nov 4, 2017

Yuuoniy Nov 4, 2017

Yuuoniy Nov 4, 2017

Yuuoniy Nov 4, 2017

Yuuoniy Nov 4, 2017

ParadeTo Nov 5, 2017

Yuuoniy Nov 4, 2017

Yuuoniy Nov 4, 2017

Yuuoniy Nov 4, 2017

laampui commented Nov 4, 2017

fanyijihua commented Nov 4, 2017

laampui left a comment

laampui Nov 4, 2017

ParadeTo Nov 4, 2017

laampui Nov 4, 2017

laampui Nov 4, 2017

laampui Nov 4, 2017

laampui Nov 4, 2017

ParadeTo commented Nov 5, 2017

leviding commented Nov 7, 2017


		While having every single mobile device on your desk would be awesome, it’s not feasible in the real world. How about resizing your viewport instead? Chrome provides you with everything you need. Jump into your inspector and click the ‘toggle device mode’ button. Watch your media queries come to life!
		拥有所有的移动设备这个想法是很美妙的，但是现实中是不可能的。不如取而代之，改变视口吧？ Chrome 提供了所有你需要的东西。打开你的调试器并点击 "toggle device mode" 按钮。你会看到媒体查询出现啦！


		Mark a DOM element in the elements panel and use it in your console. Chrome Inspector keeps the last five elements in its history so that the final marked element displays with $0, the second to last marked element $1 and so on.
		在 elements 面板中标记一个 DOM 元素，然后在 console 中使用它。 Chrome Inspector 会保存最后 5 个元素在其历史记录中，所以最后标记的元素可以用 $0 来显示，倒数第二个被标记的元素为 $1 ，以此类推。


		What’s probably less common is to use the console. Use debug(funcName) in the console and the script will stop when it reaches the function you passed in.
		可能比较少的方式是使用 console。在 console 中使用 debug(funcName)，脚本会在运行到你传入的函数的时候停止。


		In more complex debugging we sometimes want to output many lines. One thing you can do to keep a better structure of your outputs is to use more console functions, for example, Console.log, console.debug, console.warn, console.info, console.error and so on. You can then filter them in your inspector. But sometimes this is not really what you want when you need to debug JavaScript. It’s now that YOU can get creative and style your messages. Use CSS and make your own structured console messages when you want to debug JavaScript:
		在更复杂的调试中我们有时想输出很多行。为了使你的输出保持更好的结构，你可以使用更多的 console 方法，如：console.log，console.debug，console.warn，console.info，console.error 等。然后，你还可以在调试器中过滤他们。但是有时当你调试 JavaScript 时，这并不是你真正想要的。现在，你可以给你的信息添加点创意和样式了。你可以使用 CSS 并制定你自己的 console 输出格式：


		A faster way to do a querySelector in the console is with the dollar sign. $(‘css-selector’) will return the first match of CSS selector. $(‘css-selector’) will return all of them. If you are using an element more than once, it’s worth saving it as a variable.
		在 console 中执行 querySelector 的一个更快的办法是使用 dollar 符号。$('css-selector') 会返回 CSS 选择器所匹配的第一个元素。$$(‘css-selector’) 会返回所有的元素。如果你要不止一次地使用该元素，最好是把它作为变量缓存起来。


		It’s quick, but the downside is it doesn’t work on private or anonymous functions. But if that’s not the case, it’s probably the fastest way to find a function to debug. (Note: there’s a function called console.debug which is not the same thing.)
		这种方式比较快，缺点是对私有和匿名函数无效。但是，如果排除这些情形的话，这可能是最快的定位要调试函数的方法。


		## 1. "debugger;"

		除了 console.log， “debugger;” 是我最喜欢的临时应急的调试工具。一旦它在你的代码中出现，Chrome 会自动地在执行到它所在位置时停下。你甚至可以将它放在条件语句中，只在你需要的时候运行。

14 个你可能不知道的 JavaScript 调试技巧 #2404

14 个你可能不知道的 JavaScript 调试技巧 #2404

Conversation

ParadeTo commented Nov 4, 2017

ParadeTo commented Nov 4, 2017

Yuuoniy commented Nov 4, 2017

fanyijihua commented Nov 4, 2017

Yuuoniy commented Nov 4, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

laampui commented Nov 4, 2017

fanyijihua commented Nov 4, 2017

laampui left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParadeTo commented Nov 5, 2017

leviding commented Nov 7, 2017