text JavaScript和jQuery调试技巧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text JavaScript和jQuery调试技巧相关的知识，希望对你有一定的参考价值。
*@channel I know this program is difficult, rigorous, and fast-paced... all this drinking from the firehose has a way of wearing you down, and making you doubt yourself. Know that the TAs and I support each of you entirely in this process. These guidelines/steps below might feel a little bit like tough love, but I recommend thinking of them more as a guide towards becoming a more confident, self-sufficient developer and debugger. Hang in there, ladies; keep coding, reviewing, and scanning your code critically for errors. It will all pay off!* _Consider starring this message so you can use it for further reference!_
*A few steps for debugging your JavaScript:*
1.) If your code isn’t working as expected, *ALWAYS* open up the console to see if there are any error messages. If you find any errors, read them critically and try to determine what the problem is. Note that over on the right hand side of the error message, the console provides the line number within your JavaScript to help you narrow down the problem code.
2.) Verify that all references to variable names are spelled correctly, that strings have matching opening and closing quotes, and that your function/loop/if/etc brackets and parentheses close in the correct places. Proofread your code with a very critical eye — JavaScript is very unforgiving in regards to tiny syntax errors. Learn to detect small differences and bugs in your own code.
3.) If you’re unable to puzzle out a fix for an error message, *try some Google Fu!*
4.) Let your error messages teach you! Everytime you discover and troubleshoot (or get help with) an error, try to commit as much of the experience as possible to memory. Over time, you'll start to recognize error messages based on prior experience. Part of being a strong developer is having been around the error message block enough to remember the causes (and fixes!) for common bugs. Every error you tackle and triumph over will make you just a liiiiiiittle bit better at fixing later errors!
5.) Remember that updating variables in your JavaScript will *not* update those values on the HTML page. You’ll have to do that with either JavaScript or jQuery.
6.) Remember that one equal sign `=` *sets* a value, while two/three equal signs `==` or `===` *evaluate*.
7.) A plus sign `+` will add if the values are numbers or will concatenate if the values are strings.
*A couple items to verify:*
1.) Always verify that your JavaScript files are loading correctly. Remember that relative paths are used in your HTML files and tell your HTML how to “find” your JavaScript or CSS files. A quick way to check whether your file is loading is to place an alert on the very first line of your JavaScript file: `alert(“Testing”)`.
2.) If you’re using jQuery `$`, make sure you have a link to jQuery AND that your code using jQuery is linked *after* the jQuery CDN link.
3.) If you are using jQuery and linking you .js file from the HTML page’s `<head>` tag, make sure to wrap your code in a `$(document).ready(...)`: http://learn.jquery.com/using-jquery-core/document-ready/ (If you don’t have a $(document).ready(), your JavaScript will try to execute before the HTML it interacts with has rendered, which will likely break your code!)
4.) Else, make sure your .js file is instead linked from the very bottom of the `<body>` tag.
5.) If click events aren’t triggering on dynamically-generated elements (ie those created/placed by JavaScript) then look into event delegation: https://learn.jquery.com/events/event-delegation/以上是关于text JavaScript和jQuery调试技巧的主要内容，如果未能解决你的问题，请参考以下文章
资源解释为样式表，但使用 MIME 类型 text/javascript 传输
如何调试通过 AJAX（特别是 jQuery）加载的 Javascript
使用 Google Chrome 逐行调试 Javascript