我在 C/C++/Objective-C 方面非常有经验，在过去的几天里一直在尝试使用 html/css/JS 并且发现它非常令人沮丧。
由于复制/粘贴等原因，我一次又一次地被抓住，因为我有语法错误或未声明的变量，结果是代码突然停止工作，然后我不得不挠头并找出原因.
最痛苦的事情是求助于在代码中散布警报，以找出失败的原因。我知道有用于记录的新控制台对象，但它似乎不适用于 Komodoedit 或 jsFiddle？这是我一直在使用的。
有没有办法使用这些工具或替代工具，我可以像使用其他语言一样在调试器中逐行遍历代码？或者除了jslint之外还有什么技巧可以在执行代码之前轻松检测代码问题？
[我不想使用任何可能内置支持日志记录等的库，因为我发现它们（以及 JQuery/JQuery 移动版）正在大大减慢 iPhone 上的加载时间，所以我想专注于纯JS。]
[我的目标浏览器只是 iOS，但我大部分时间都在使用 Komodoedit 和 Chrome，每隔几个小时在 iPhone 上尝试一下]
谢谢
你需要几个工具。
首先，让自己成为一个真正的调试器。我使用 Chrome 内置的那个。Safari 和 Firebug 中内置了一个类似的插件，可作为 Firefox 的插件使用。这将允许您设置断点并单步执行您的代码并查看到底发生了什么。
其次，非常习惯于通过jsLint运行您的代码。这将向您展示许多明显的拼写错误，并鼓励您从一开始就编写健壮的代码。
三、开始写strict模式。这将再次防止一些明显的拼写错误，并迫使你养成一些好习惯。
四、console.log()需要时使用。一旦你有了调试器，它的输出将显示在浏览器中任何页面的调试器的调试控制台中，包括 jsFiddle 页面。您必须在 jsFiddle 的正确框架上调用调试器，然后它才能正常工作。我既使用常规调试器，也console.log()一直使用 jsFiddle。在 jsFiddle 和调试器中需要一些计算才能找到您自己的代码设置断点的位置，但是一旦找到它，它就很容易使用。
第五，javascript 根本不是 C++。虽然语法看起来很熟悉，但使用匿名函数和闭包以及对象和原型的方式却大不相同。作为一个在学习 javascript 之前使用 C++ 编程很多很多年的人，我非常感谢我现在可以在 javascript 中做的事情，在 C++ 中做的工作要多得多，但是我花了一段时间才让我的大脑进入一种新的思维模式。在 javascript 开发的头几年，我花了太多时间试图模仿 C++ 技术，而不是仅仅学习更好的方法来实现 javascript 中的目标。
第六，您将不得不改变编写和测试代码的方式，因为缺少为您发现错误的编译器。我记得在 C++ 时代，当我需要重构某些东西时，我可以进行大量更改，然后让编译器找到我需要修复语法的所有其他地方。你不能用javascript做到这一点。当您进行大量更改时，您可以通过 jsLint 运行以发现一些问题，然后您实际上需要执行每条路径以确保一切正常。这有点痛苦。
第七，找到单元测试的策略/工具。一旦一个项目获得了超过几个功能，您将从构建单元测试中受益匪浅，您可以在任何时候进行重大更改时运行这些单元测试。与没有单元测试相比，他们都会在更短的时间内为您找到问题，并且当您看到需要时，他们会给您重构和清理代码的勇气，因为您知道单元测试会告诉您一切是否正确再次工作。这是额外的前期工作，可以在未来多次获得回报。
Firefox 有一个名为 FireBug 的附加组件，它对调试 CSS/javascript 非常有帮助，是的，它确实能够单步执行脚本和命令行，您可以在其中尝试各种 javascript 表达式。我很确定 Chrome 也有类似的功能。
在这篇文章中，您可以获得调试 javascript Advance-javascript-debugging-techniques的工具列表
由于您使用的是 Chrome，您只需要打开开发者控制台（扳手 -> 工具 -> javascript 控制台，或 Ctrl+Alt+J（猜测））。不要在代码中添加警报，而是使用console.log,console.error和console.info打印到它。所有这些都是可变参数，因此您可以根据需要将尽可能多的信息传递给一个呼叫。
除此之外，您可以使用控制台即时测试和修改部分代码，或者只是尝试一些片段以查看它们是否有效。它是一个功能齐全的 REPL，也适用于当前文档。
在开发人员控制台的源选项卡中，您可以设置断点并单步执行代码，分析每个点的状态。此页面详细介绍了它：http ://chromedevtools.googlecode.com/svn-history/r421/trunk/tutorials/breapoints/index.html
在元素选项卡中，您可以对 DOM 中的元素更改设置断点，包括对属性和子节点的更改。右键单击一个节点并选择所需的选项。这在调试异步代码并与文档一起播放时会派上用场（例如，AJAX 调用插入新内容）。
除此之外，您可以滚动到右侧样式窗格的底部，然后打开事件侦听器部分。在这里，您可以检查绑定到所选 DOM 节点的所有事件。
您可以在代码中输入debugger（不带分号），此时它将打开源选项卡，以便您进一步检查代码。我认为这可能是特定于 Chrome 的。
最后，像 JSlint 这样的工具将帮助您在编码时发现未声明的变量，以及代码格式产生意外错误的情况，有些甚至可能使用语法高亮来让您注意到未定义的变量。
这也只是表面现象。您的编辑器和 JSlint 可以使您的代码看起来正确并无错误地解析，但是浏览器及其控制台是您将花费大部分时间的地方。