- Introduction
- Targeting .NET 4.5
- New Structure and Solution Explorer Enhancements
- Improved Team Development
- Easier Navigation
- Enhanced Views with Multiple Designers
- HTML Client: JavaScript IntelliSense and DOM Explorer Improvements
- Intrinsic Database Management with Linked Database Projects
- Conclusions
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
HTML Client: JavaScript IntelliSense and DOM Explorer Improvements
At a higher level, Visual Studio 2013 has added several improvements to the JavaScript code editor and the DOM Explorer window. (We first explored this window in a previous article, when I introduced you to the HTML Client in Visual Studio LightSwitch 2012 Update 2.) Because such improvements are part of Visual Studio, the LightSwitch development experience can take advantage of them as well. The code editor for JavaScript has been dramatically improved; for instance, all the occurrences of an identifier are now highlighted, and a navigation bar at the upper-right corner makes it easier to browse methods and declarations, as shown in Figure 4.
)
Figure 4 Some IntelliSense improvements for the JavaScript editor.
Another great new improvement in the coding experience is the new auto brace complete. With this feature, Visual Studio 2013 automatically adds closing quotes, parentheses, brackets, and braces for you as you type code.
The DOM Explorer window allows for inspecting the Document Object Model (DOM) of an HTML page while it's being shown—a particularly handy feature at debugging time. In Visual Studio 2013, DOM Explorer highlights in yellow the parts of the HTML page that are being rendered; such highlights are very useful for understand the rendering progress. DOM Explorer also now supports direct editing, meaning that you can add new HTML attributes to the code while inspecting the page. The right side of the window provides additional tools for inspecting styles and layout properties, including events. Figure 5 shows how DOM Explorer looks in action, in this case with a LightSwitch HTML app running.
)
Figure 5 DOM Explorer in action.
The JavaScript interactive console now supports IntelliSense, which makes testing code a faster and sharper task.