JS Basics: (i)

Developed a lot of projects, I feel that JavaScript scripting language is too useful, so put some new writing, especially debugging skills.

This development tool: Webstorm

1. Official website: http://www.jetbrains.com/webstorm/index.html

2. Advantages:

Webstorm function
Javascript
· Dom-based, specific browser completion
· Coded navigation and usage queries
· Support ECMAScript
· Support Coffeescript
· Support Node
· JavaScript refactoring
· JavaScript Unit Test
· Code detection and quick fixes
· Jslint/jshint
· Mozilla-based JavaScript debugger
Other uses
· Bulk Code Analysis
· Mixed or blended coding language
· Spell checker
· Duplicate Code Detectors
Editing languages
· Support HTML5
· Css/js
· Inspection and quick fixes
· Zen Code
· Show content
· Show the style of the app
A convenient environment
· HTML5 sample files and other Web application templates
· FTP and Remote file synchronization
· Integrated version control system
· Local Records

3. Features:

Webstorm Features
Smart Code Completion
Support for different browser prompts, including all user-defined functions (in the project)
The code complements all the popular libraries, such as: JQuery, YUI, Dojo, Prototype, Mootools and Bindows.
Code formatting
Not only can the code be formatted, but all rules can be defined by themselves
HTML hints
People often in the JS code to write HTML code, generally very painful, but with smart hints, it is much more fun. and HTML inside can also have JS hint.
Lenovo Query
Simply press the CTRL key to click on a function or variable, etc., you can jump directly to the definition, you can find a function or variable in the whole project, you can also find use and highlight.
Code refactoring
This operation is somewhat like ReSharper, the user who is familiar with ReSharper should be able to get started quickly, with support for renaming, extracting variables/functions, inline variables/functions, moving/copying, safe deletion and so on.
Code checking and quick fixes
Can quickly find errors in the code or need to optimize the place, and give a change of opinion, quick fix.
Code debugging
Support code debugging, interface and idea similar, very convenient.

4. Tips for use:

Http://www.cnblogs.com/jikey/archive/2010/12/25/1916938.html

5. Shortcut keys:

Common shortcut keys:

ALT + ENTER import package, auto fix
ctrl+n   find class
Ctrl+shift+n find file
ctrl+alt+l  format code
CTRL + Alt+o optimized imported classes and packages
Alt+insert generate code (such as Get,set methods, constructors, etc.)
Ctrl+e or alt+shift+c  recently changed code
Ctrl+r Replace text
Ctrl+f Find text
Ctrl+shift+space Auto-complete code
CTRL + SPACE code hint
Ctrl+alt+space class name or interface name hint
Ctrl+p method parameter hint
Ctrl+shift+alt+n Find a method or variable in a class
Alt+shift+c compare recently modified code
&NBSP
shift+f6  Refactoring-rename
ctrl+shift+ first key
Ctrl+x Delete line
Ctrl+d Copy row
ctrl+/or ctrl+shift+/  Comments (//or/*...*/)
ctrl+j  Automatic code
ctrl+e recently opened file
Ctrl+h show class map
Ctrl+q Display the comment document
Alt+f1 find code location
alt+1 quickly open or hide the project panel
ctrl+alt+ Left/right return to the location you last viewed
ALT + Left/right Toggle Code View
ALT + Up/down quickly move the anchor between methods
Ctrl+shift+up/down code moves up/down.
F2 or SHIFT+F2 highlighting error or warning quick positioning
 
Code label input is complete, press TAB to generate the code.
Select the text, press CTRL+SHIFT+F7, highlight all the text, and press ESC to highlight the disappear.
Ctrl+w Check the code, continue to have other effects
Select the text, press ALT+F3, look down the same text, and highlight.
Ctrl+up/down cursor jumps to the first or last line
Ctrl+b quickly open the class or method at the cursor

  Specific usage:
Auto-Navigate to Folder

A default file is generated:

Create a JS file:

View JS Source code:

Doc=document.  Getelementsbyname ("");
CTRL + click is equivalent to F12 in VS

Test code:
HTML page:

<! DOCTYPE html>
JS Page:
function Add (A, b) {    var sun=a+b;   alert (Sun);}
Open the HTML page and the upper-right corner:
Directly check the browser out of effect:
Debugging:
Firefox:
1. Add:

Click:

2. The most original debugging methods add a few: Aler
3.console.info () Level: Info,debug,error,log,dir (all internal information output), warn
Difference:
It just doesn't show the same place:

Breakpoint Debugging:

Post-click Effects:



Here are the buttons for debugging:

There are several important places that you might want to try.


Click here:

Enter your expression: You will come up with the following results



Second: Debug in Google Chrome:
Right-click to check: or F12
Click sources: Select the script you want to debug


Under Breakpoints, click the button.





webstorm+ Firefox:
1. Request to install jetbrains Firefox extension 0.6.0

webstorm+ Google:
1. Requirements for installation and configuration: Extender JetBrains IDE support Chrome Plugin
2. See also article: http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e


I have a problem with Google Browser, install it yourself

 JS Basics: (i)