WHAT IS MICROSOFT EDGE
Microsoft Edge is a cross-platform web browser created and developed by Microsoft. It was first released for Windows 10 and Xbox One in 2015, for Android and iOS in 2017, for macOS in 2019.
The Microsoft Edge browser comes with built-in web development tools, called Microsoft Edge DevTools. DevTools is a set of web development tools that appears next to a rendered webpage in the browser. DevTools provides a powerful way to inspect and debug webpages and web apps. You can even edit source files and create website projects, all within the DevTools environment.
With DevTools, you can do the following:
- Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including
.html,.css,.js, and.pngfile formats. - Emulate how your web product behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems.
- Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps.
- Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found.
- Use a development environment to sync changes in DevTools with the file system and from the web.
Open DevTools
In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.
Main ways:
| Action | Resulting tool |
|---|---|
| Right-click any item on a webpage, and then select Inspect. | The Elements tool, with the DOM tree expanded to show the right-clicked page element. |
Press Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS). | The previously used tool, or the Welcome tool. |
Press F12. | The previously used tool, or the Welcome tool. |
Additional ways:
| Action | Resulting tool |
|---|---|
On the Microsoft Edge toolbar, select Settings and more ( ) > More tools > Developer tools. | The previously used tool, or the Welcome tool. |
Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS). | The Console tool. |
Press Ctrl+Shift+C (Windows, Linux) or Command+Option+C (macOS). | The Elements tool, with the DOM tree expanded to show the <body> element. |
Press Shift+F10 to open the right-click menu. To select the Inspect command, press Up Arrow and then Enter. | The Elements tool, with the DOM tree expanded to show the <html> element. |
Press Tab and Shift+Tab to put focus on a page element. Then press Shift+F10 to open the right-click menu. To select the Inspect command, press Up Arrow and then Enter. | The Elements tool, with the DOM tree expanded to show the focused page element. |
Features of the main toolbar
DevTools gives you an amazing amount of power to inspect, debug, and change the web product currently displayed in the browser. Most of the tools display the changes live. Live updates make the tools incredibly useful to refine the appearance and navigation or functionality of a web project without the need to refresh or build it.
Tabbed tool panels containing tabs and pages
Other than a couple of icon tools (the Inspect tool and Device Emulation), DevTools is divided into and a set of tabbed tools, such as the Elements tool, the Console tool, and the Sources tool. Within the Command Menu, tools are referred to as panels. A tool’s tab contains a panel which contains the tool’s UI.
Higher-level tabs:
Tools are organized into a set of tabs on the main toolbar and on the drawer toolbar. Most tools are also called panels. A panel is the inner UI of a tool. A tool has a tab that can be present on the main toolbar and Drawer toolbar.
Lower-level tabs:
Within the panel of some tools, there are one or more sets of tabs (tabbed panes). For example, the Elements tool contains a set of tabs that includes Styles, Event Listeners, and Accessibility tabs. For other tools, the tool’s panel has pages listed along the left side.
The main toolbar and the Drawer toolbar
There are two toolbars: the main toolbar at the top of DevTools, and the Drawer at the bottom when you press Esc.
The main toolbar contains the following features:
- Icon tools:
- Inspect tool (
) toggle button. - Device Emulation (
) button.
- Inspect tool (
- Tool tabs:
- Welcome tool.
- Elements tool. Permanent.
- Console tool. Permanent.
- Sources tool. Permanent.
- Network tool.
- Performance tool.
- Memory tool.
- Application tool.
- Security tool.
- Lighthouse tool.
- CSS Overview tool.
- Icons:
- More tabs (
) button. - More Tools (
) button. - JavaScript errors counter (
) button. - Issues counter (
) button. - Settings (
) button. - Send Feedback (
) button. - Customize and control DevTools (
) menu button. - Close DevTools (
) button.
- More tabs (
The toolbar features are described below.
Inspect tool
When you click the Inspect tool () button, you can select an element on the current webpage. While the Inspect tool is active, you can move your mouse over different parts of the webpage to get detailed information about page elements, along with a multi-color overlay that shows the layout dimensions, padding, and margin of the page element.
WHAT IS VISUAL STUDIO CODE
Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git
Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment, and more time executing on your ideas.
Available for macOS, Linux, and Windows
Visual Studio Code supports macOS, Linux, and Windows – so you can hit the ground running, no matter the platform.
Edit, build, and debug with ease
At its heart, Visual Studio Code features a lightning fast source code editor, perfect for day-to-day use. With support for hundreds of languages, VS Code helps you be instantly productive with syntax highlighting, bracket-matching, auto-indentation, box-selection, snippets, and more. Intuitive keyboard shortcuts, easy customization and community-contributed keyboard shortcut mappings let you navigate your code with ease.
For serious coding, you’ll often benefit from tools with more code understanding than just blocks of text. Visual Studio Code includes built-in support for IntelliSense code completion, rich semantic code understanding and navigation, and code refactoring.
And when the coding gets tough, the tough get debugging. Debugging is often the one feature that developers miss most in a leaner coding experience, so we made it happen. Visual Studio Code includes an interactive debugger, so you can step through source code, inspect variables, view call stacks, and execute commands in the console.
VS Code also integrates with build and scripting tools to perform common tasks making everyday workflows faster. VS Code has support for Git so you can work with source control without leaving the editor including viewing pending changes diffs.
Make it your own
Customize every feature to your liking and install any number of third-party extensions. While most scenarios work “out of the box” with no configuration, VS Code also grows with you, and we encourage you to optimize your experience to suit your unique needs. VS Code is an open-source project so you can also contribute to the growing and vibrant community on GitHub.
Built with love for the Web
VS Code includes enriched built-in support for Node.js development with JavaScript and TypeScript, powered by the same underlying technologies that drive Visual Studio. VS Code also includes great tooling for web technologies such as JSX/React, HTML, CSS, SCSS, Less, and JSON.
Robust and extensible architecture
Architecturally, Visual Studio Code combines the best of web, native, and language-specific technologies. Using Electron VS Code combines web technologies such as JavaScript and Node.js with the speed and flexibility of native apps. VS Code uses a newer, faster version of the same industrial-strength HTML-based editor that has powered the “Monaco” cloud editor, Internet Explorer’s F12 Tools, and other projects. Additionally, VS Code uses a tools service architecture that enables it to integrate with many of the same technologies that power Visual Studio, including Roslyn for .NET, TypeScript, the Visual Studio debugging engine, and more.
Visual Studio Code includes a public extensibility model that lets developers build and use extensions, and richly customize their edit-build-debug experience.
Ready, set, code!
If you prefer a code editor-centric development tool or are building cross-platform web and cloud applications, we invite you to try out Visual Studio Code and let us know what you think!
Drop your comment
