Page production Chapter 2--development, debugging Tools

Sublime Text 2 (Sublime text official website http://www.sublimetext.com/)

Common shortcut keys

1.Goto anything lookup (CTRL+P)

• Enter the file name directly to make a fuzzy lookup
• : + line number, jump directly to the specified line number (find a row with a shortcut key ctrl+g, enter the line number directly)
• @ + function name, quick Find to established function, @+css selector name, Quick Find style (with a direct shortcut key Ctrl+r)
• # + keyword, you can match to the keyword (there is a direct shortcut key CTRL +;)

2. Command Panel (CTRL+SHIFT+P)

Enter keywords to find the desired command through fuzzy matching, so you don't have to remember many commands

For example, to turn off/on the sidebar, enter side, find a match to the side bar, enter. You can see that the shortcut key is Ctrl+k ctrl+b

3. Multi-line selection (CTRL+D,CTRL+SHIFT+L)

• Select the next same text down (press Ctrl+d repeatedly)
• Select all the same text at once (ALT+F3)
• Skip the currently selected, select Next (ctrl+k ctrl+d)

4. Common Plugins

The first step is to install the package Control

Installation method: Open the View (Ctrl + ') >show Console, open the address of the package control (HTTPS://PACKAGECONTROL.IO/INSTALLATION#ST2), Find the code that needs to be pasted into the console here, then enter to start the installation. After the installation is complete, restart St, open St, if the installation is successful, you can find the package control under preferences, open the Package Control command Panel, enter the name of the plugin you want to install, and then go to install automatically.

Common plugins:

• Emmet (about how to use Emmet to quickly write HTML and CSS, refer to http://www.iteye.com/news/27580)
• Docblockr (provides file comments to facilitate late generation of API documentation based on comments, enter "/**" + ENTER to bring up the comment template (on the function of the line is effective)
• Sidebarenhancements (now only supports SUBLIMETEXT3)

now in sublime Text 2 has not been searched for this plugin, if sublime text 2 need to manually install this plugin, download the plugin on the Internet, and then through the menu preferences, Browse Packages Locate the plugin directory and then unzip the plugin into this directory (you may need to restart sublime).

• Terminal (Allow to open cmd Command window in sublime Text2, very useful a plugin, install the plugin good, open cmd Command Window shortcut key is ctrl+shift+t)

More plugins: https://packagecontrol.io/

5. How to create a new HTML file quickly

Create a new file (Ctrl + N), when we want to set the file syntax to HTML, always bother to open the lower right corner of the plain Text, and then find HTML, the process is too high repetition. The quicker way is to open the command panel (ctrl+shift+p), then enter ss:html for fuzzy matching, find the set syntax:html carriage return, and other file type settings similar. (When I listened to the teacher's Quick Method, the heart was really excited, I liberated, ha ha ~ ~) If the installation of Emmet, enter! or Html:5, and then press the TAB key to automatically complete the HTML code, very convenient, there are wood!

6. Notes

ctrl+/Single-line comment (the same shortcut key for removing the comment symbol for a row)

ctrl+shift+/Block Comments (note the selected content), Sublime automatically selects the annotation based on the language.

7.Snippets (create code snippets for reused code)

New Code snippet: Tools>new Snippets

Write and save snippet:

• In the Content tab, in the CDATA [] section, write the contents of the code snippet, the red part
• The keyword for writing code snippets in the Tabtrigger tag (this can be understood as you name the function and automatically call it by keyword)
• Write the scope of the use file for the code snippet in the Scope tab

When you finally save the file, the suffix must be. Sublime-snippet and saved in the default path, you cannot modify the path.

Once saved, enter the keyword for the snippet in any HTML file and press the TAB key to invoke it!

8. Turn on VIM compatibility mode

Preferences>settings-user, remove "Vintage" from "Ignored_packages"

9.Sublime Text Learning Video URL recommended

A sublime Text2 teaching video from abroad Http://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2

Recently in the online viewing of sublime Text3 introductory video, personally feel good to speak. http://www.imooc.com/learn/333

10. Debugging Tools

Most browsers have their own debugging tools, which are similar. Individuals prefer to use Firefox and Chrome.

F12 Open the browser Debugging tools, in the page production, the main is to view the elements panel, view HTML and CSS, by adding or removing changes to debug. With a magnifying glass to see the elements you want to see, you can see the HTML of this element

and CSS.

Ie8+ 's Internet Explorer's own debugging tool can debug any version of ie5,7 to the version of IE you are installing now.

The IE6 effect can be installed on IE Tester, if you want to debug, you must install IE6 native browser and install Internet Explorer Developer Toolbar.

BTW: The use of debugging tools is practice makes perfect, see more, practise more.

Chrome Debugger Document: Https://developer.chrome.com/devtools

Firefox Debugger document: Https://developer.mozilla.org/zh-CN/docs/Tools/Debugger

firebug:http://getfirebug.com/

IE Debugger Documentation: https://msdn.microsoft.com/library/bg182326 (v=vs.85). aspx

Page production Chapter 2--development, debugging Tools