请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

你真的好好调试你的代码了吗?

yingliu Mozilla员工 发表于 2017-12-27 16:02:42 | 显示全部楼层 [复制链接]
3 5405
本帖最后由 yingliu 于 2017-12-27 16:04 编辑

虽然你可以使用 console.log 检查 JavaScript,但如果你真的想知道程序代码有没有问题,你还是需要一个完备的排错工具。当然,你还得知道怎么用。因此,Mozilla 团队在 Firefox DevTools Playground 中增加了专门介绍 debugging 的新区块。

Mozilla 设计了四门 FirefoxDebugger 课程来说明如何运用此工具检查与修复简单的 JavaScript 应用程序。欢迎使用!如果你还想在 DevTools Playground 中看到什么新信息,也欢迎向我们反馈。

Debugger Playground
68mzb95c.png
课程完全免费!

首先,请到 GitHub 下载 app 程序代码。

这是 Mozilla 第一次推出这种形态的课程,希望你能满意。Mozilla 在不断寻找能帮助开发者学习并改善工作流程的新方法。如果有任何建议,欢迎随时指教。在未来几个月里,我们将扩大 Playground 的服务范围,也希望能听听开发者的声音。

如果你对 Firefox Debugger 还不太熟悉,可以参考 MDN 上的 debugger 相关文档,以及观看这段视频


现在就来试试全新上线的 Debugger Playground 里面的一堂课。你试过用 console.log 找变量吗? Debugger 可以让你更快更准确地办到同样的事。

用 Debugger 找变量

使用 Firefox Debugger 找变量,比用 console.log 更简便。方法如下:

先看看这个简单的开发程序。第一步,用新标签页开启程序

这个应用有个名为 addTodo的功能,可以输入获取窗口中的值、产生对象,再把对象送入任务列表中。我们新增一个任务来试试。照理来说,新任务应该要加入窗口里,不过,你会看到这个:[object HTMLInputElement]。

出了点问题,我们必须帮程序代码排错。你可能会想在函数内加入 console.log,借此找出问题根源。如果是这样的话,做法是:
  1. const addTodo = e => {
  2. e.preventDefault();
  3. const title = document.querySelector(".todo__input");
  4. console.log('title is: ', title);
  5. const todo = { title };
  6. console.log('todo is: ', todo');

  7. items.push(todo);
  8. saveList();
  9. console.log(‘The updated to-do list is: ‘, items);
  10. document.querySelector(".todo__add").reset();
  11. };
复制代码

这虽然行得通,但麻烦又费力。等到改好程序代码以后,还得特别删除那些线。相较之下,改用 Debugger 的断点(breakpoint)就方便得多。

到 Debugger Playground 能学到更多

Debugger Playground提供了所有有关 Firefox Debugger 的基础知识,包括检查 call stack、设定条件式断点,以及其他许许多多的宝贵信息。我们知道,对初学者来说,学会使用 Debugger(和帮 JavaScript 排错)并不容易,因此,我们设计出一个简单的操作应用程序,以帮助你了解和调试。一直在浏览器上执行,也有助于在实际开发时确保一切正常运行。你可以到 GitHub 下载 这个应用程序,然后到 Playground 里跟着在线课程一步步操作。

可以向我们反馈你对哪些领域有兴趣,我们正在着手整理有关最新网络科技的新教材,所以特别希望能听听开发者的想法。请在下方评论区留言告诉我们,谢谢!



310971373 狐狸精
发表于 2017-12-29 09:18:44 | 显示全部楼层
沙发沙发,代码调试很重要哦 ~~
Guo-GreenTree 社区新人
发表于 2018-1-6 23:58:15 | 显示全部楼层
Mark
study well
Dadada_ 社区新人
发表于 2018-3-9 10:40:30 | 显示全部楼层
The playground is so cool.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表