调试 JavaScript 和 CSS 的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8988873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to debug JavaScript and CSS?
提问by Ann Sanderson
There are quite a few tools out there to debug JavaScript and CSS. Firebug, "Alert" messages, Script Debugger, MSE7.exe
有很多工具可以调试 JavaScript 和 CSS。Firebug、“警报”消息、脚本调试器、MSE7.exe
I was wondering if anyone could chime in on which one happens to be the best and easiest tool to debug JavaScript and CSS issues?
我想知道是否有人可以谈谈哪一个恰好是调试 JavaScript 和 CSS 问题的最佳和最简单的工具？
Thanks
谢谢
回答by minikomi
Firebug and Chrome Dev tools are pretty much the gold standard client side.
Firebug 和 Chrome Dev 工具几乎是黄金标准的客户端。
Chrome docs:
Chrome 文档：
http://code.google.com/chrome/devtools/docs/overview.html
http://code.google.com/chrome/devtools/docs/overview.html
Firebug docs:
萤火虫文档：
回答by ?ime Vidas
As for CSS, Firebug has "Style" and "Computed" tabs. Just select an element, and inspect those tabs. I cannot think of any CSS issue that cannot be resolved with these.
至于 CSS，Firebug 有“样式”和“计算”选项卡。只需选择一个元素，然后检查这些选项卡。我想不出任何无法用这些解决的 CSS 问题。
回答by user1166940
For me, using Firebug (especially in Firefox) is the best solution.
对我来说，使用 Firebug（尤其是在 Firefox 中）是最好的解决方案。
Instead of using Alert messages have you tried console.log('your message')? This will save you clicking alert windows and output messages in the firebug console.
您是否尝试过使用 console.log('your message') 而不是使用警报消息？这将使您无需单击警报窗口并在 firebug 控制台中输出消息。
回答by archil
My personal choise is Chrome with its developer tools. Inspect element for css debugging, and Scripts tab for javascript source debugging. You may also use Console for js logging
我个人的选择是 Chrome 及其开发者工具。用于 css 调试的检查元素，以及用于 javascript 源代码调试的 Scripts 选项卡。您也可以使用控制台进行 js 日志记录
But actually, web site should support debugging too. In production versions, generally both css and js files are minimized and concatenated, which is hard to debug.
但实际上，网站也应该支持调试。在生产版本中，通常css和js文件都被最小化和串联，这很难调试。
回答by xyz
Firefox : Firebug
IE : F12 and alert
Firefox：Firebug
IE：F12 和警报
回答by ryankeairns
I am an avid Firebug user, but another think you should consider is linting (validate against rules and best practices). This will not only help you learn some best practices but can also help identify coding issues before you get to the browser.
我是一个狂热的 Firebug 用户，但您应该考虑的另一个想法是 linting（根据规则和最佳实践进行验证）。这不仅可以帮助您学习一些最佳实践，还可以帮助您在使用浏览器之前识别编码问题。
Here is a web based js lint toolwhich you have to paste your code into. Another alternative would be to find a plugin or extension for your IDE. For example, if you were an eclipseuser, you can install the jslint pluginand check your code as you write it.
这是一个基于 Web 的 js lint 工具，您必须将代码粘贴到其中。另一种选择是为您的 IDE 查找插件或扩展。例如，如果您是eclipse用户，则可以安装 jslint 插件并在编写代码时检查代码。
回答by HieuHT
IE F12 is too slow to debug. With a heavy web apps, the browser will freeze for ages.
IE F12 太慢，无法调试。使用繁重的网络应用程序，浏览器将冻结很长时间。
