This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
When we launched the project during the Microsoft Build Developer Conference keynote, we had only three plugins: the DOM Explorer, the Interactive Console and Modernizr. We knew at this time that the key to the success for a project such as Vorlon is the quantity and quality of plugins. When you want to debug your website, you do not want to do much complicated things. You just want to pick the correct plugin and get the correct information.
This is why we made this project open source. We know you have a lot of ideas to provide great debug experiences to web developers.
So two months, 66 pull requests, 78 issues and 547 commits later: we are proud to announce that we (YOU and the team) just released Vorlon.js version 0.0.15! You can get it by either cloning our GitHub repository or installing it using npm command tool (
npm install –g vorlon).
Let’s have a look at what is new in this version.
XHR Panel is here to help you get the list of requests done through XMLHttpRequest. You can choose to enable or disable the recording using the play button.
Network Monitor is bringing the ability for you in Vorlon to see all the network exchanges that are done between the browser and the web server. It provides the resource name, the server domain, the type of request, the duration in milliseconds and a nice visual timeline!
Resource Explorer gives you information about what is stored locally on the client browser instance. There is data about Sessions , Cookies , and Local Storage. This can be really useful when you want to debug local cache or login / persistent user data issues.
NG Inspector is a
$scope debugger for AngularJS. You have an easy access to all the values stored in each scope. This first version gives you information, a future one will give you the ability to edit your scopes.
DOM Explorer has been improved a LOT.
Previously, this plugin was sending all the DOM data from the client to the dashboard each time it changed. This had a huge impact on performances. This is now fixed and you can refresh the DOM from the client either by asking it manually hitting the refresh button, or activating the auto-refresh on the Settings pane. The autofresh is smarter and uses
MutationObserver if available on the client browser.
Bonus feature: when the DOM changes on the client side, the round indicator in the refresh button changes to red!
As you can see, the DOM Exploring pane is more beautiful and easier to read.
You can now edit HTML content and attributes by clicking on it. When hitting ENTER, the changes will be applied on the client side.
The DOM highlighting feature is easier to access. It happens when your mouse goes over the DOM element on the DOM explorer in the Vorlon dashboard.
You can also right click on an element to remove or edit things. This is the best ergonomic way to enable deletion on attributes.
In the right pane, you have more information that just only the real CSS code now.
The layout tab gives you information that you are used to get in classic F12 tools: the margin, padding, border and size information.
Same thing for the computed styles which contains all the CSS styles applied explicitly and implicitly inherited.
The HTML tab is a better tool to edit text in the DOM. You can do breaklines and apply the change by hitting the save button.
Finally, the settings section is where is you can activate the auto refresh for the DOM.
Interactive Console have some new features too.
We have the
console.dir and complex
object log support. You can navigate in object properties using a visual tree. Filters are available to only show a subset of logs and you can filter using a search-like text area.
Other Changes and Improvements
We did a lot of other changes in the code organization and structures that are not directly visible in plugins and features.
For instance, we renamed and moved the
catalog.json file which contains the list of plugins and some parameters to the Server folder. It is now called
config.json because some parameters are not related to plugins. To avoid copy paste and to simplify debug and usage, we also added an
enabled boolean parameter in the plugins configuration in
config.json. If false for a specific plugin it will not be loaded in the dashboard and not sent to the client in the generated vorlon.js file.
You can read more about the changes we made in the whatsnew.md file available on our GitHub repo.
We are now working on the next version which will contain new plugins and core improvements. Authentication, webgl, webaudio are part of the list!
As I said, we want this project to be the web developer’s project. If you have an idea, you can either:
- Submit an issue on GitHub
- Create it yourself and submit a pull request (we review this every day!)
_Note: to help you learn how to create plugins, I have written this intro.
Let’s work together on Vorlon.js to make debug experiences easier and better.
Do not forget to follow our team twitter account!
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Use virtual machines for Mac, Linux, and Windows
- Remotely test for Microsoft Edge on your own device
- Coding Lab on GitHub: Cross-browser testing and best practices
In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)
More free cross-platform tools & resources for the Web Platform:
- 1 Make Your Own Social Network, Game Server, or Knowledgebase! - Sourcehunt
- 3 Create Your Own Yeoman-Style Scaffolding Tool with Caporal.js
- 4 Fetching Data from a Third-Party API with Vue.js and Axios
- 5 How to Improve Site Performance (and Conversions) with Dareboost