Debug WebGL and HTML5 Mobile Experiences with Visual Studio Emulators
Key Takeaways
- Visual Studio 2015 RTM now offers a free emulator for Android, which can be used to test WebGL experiences on Android devices. The emulator supports touch, allowing developers to test and debug multi-touch within WebGL experiences.
- Developers can use Vorlon.js to simplify the debugging process on Android and Windows Phone emulators. The tool offers various plugins that can aid in debugging, including Modernizr which can highlight layout sizes and other elements.
- Visual Studio Emulators simulate different configurations of hardware and software, allowing developers to test how their WebGL HTML5 applications will perform on various devices without needing the actual hardware. This can significantly speed up development and testing processes, ensuring a consistent user experience across different devices.
WebGL testing
Once installed, you can launch the tool:



Override software rendering list
.






Going further with Vorlon.js
We made Vorlon.js initially to simplify the life of mobile web developers. If you haven’t heard of it yet, feel free to have a look to the video on our website: http://www.vorlonjs.io/ and check this article: Why we made vorlon.js and how to use it to debug your JavaScript remotely Let’s first review how to debug your layer on Android and Windows Phone emulators. For instance, I’m currently playing with Flexbox during my spare time to improve the Babylon.js website. Thanks to the Modernizr plug-in, you can see that Flexbox is supported by the emulator and you can even review the layout size via the DOM Explorer:
172px x 112px
.
Let’s review the same site on the Windows Phone emulator (on the right):

140px x 91px
.
Another interesting feature is the interactive console. Sometimes, using WebGL, it’s hard to know why your code failed on a mobile device. This is often because the mobile’s GPU is not supporting a specific feature or because a shader doesn’t compile. This is, for instance, the case of our “Depth of field / end” demo. The shader is too complex for Windows Phone and you can simply verify it with our tool:

More hands-on with JavaScript
This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine. 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
- Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Advancing JavaScript without Breaking the Web (from Christian Heilmann)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe including the JS and babylonJS projects)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the JS project)
Frequently Asked Questions (FAQs) about Debugging WebGL HTML5 Mobile Experiences with Visual Studio Emulators
What is WebGL and why is it important for HTML5 mobile experiences?
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. It’s crucial for HTML5 mobile experiences because it allows developers to create rich, high-performance, and interactive graphics content. This includes games, animations, and data visualizations that can run smoothly on mobile devices. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.
How can I debug WebGL in Visual Studio?
Visual Studio provides a powerful debugging environment for WebGL. You can use the JavaScript Console to log diagnostic information or use breakpoints to pause execution of your WebGL application. The WebGL state and object inspectors allow you to view and modify the current state of WebGL objects. Additionally, the Shader Editor allows you to debug and edit your shaders in real-time.
What are Visual Studio emulators and how do they enhance WebGL HTML5 mobile experiences?
Visual Studio Emulators are virtual devices that simulate different configurations of hardware and software. They allow developers to test how their WebGL HTML5 applications will perform on various devices without needing the actual hardware. This can significantly speed up development and testing processes, ensuring that your application provides a consistent user experience across different devices.
How can I run HTML5 in an Android emulator?
Running HTML5 in an Android emulator involves creating a new Android project in your preferred development environment, such as Visual Studio or Android Studio. You then need to set up an Android Virtual Device (AVD) that represents the configuration of the device on which your application will run. Once the AVD is set up, you can load your HTML5 application into the emulator and run it as you would on a physical device.
Why is my WebGL application not working on my mobile device?
There could be several reasons why your WebGL application is not working on your mobile device. It could be due to hardware limitations, as not all mobile devices support WebGL. It could also be due to software issues, such as outdated browser versions or incompatible browser settings. Debugging your application using Visual Studio emulators can help identify and resolve these issues.
How can I optimize my WebGL application for better performance?
Optimizing a WebGL application involves various strategies, such as minimizing draw calls, using appropriate texture formats, and optimizing shader performance. It’s also important to use efficient algorithms and data structures, and to take advantage of hardware acceleration where possible. Profiling tools can help identify performance bottlenecks and guide optimization efforts.
Can I use WebGL with other web technologies?
Yes, WebGL can be used in conjunction with many other web technologies, including HTML5, CSS3, and JavaScript. This allows for the creation of rich, interactive web applications that can leverage the full capabilities of modern web browsers.
How can I ensure compatibility of my WebGL application across different devices?
Ensuring compatibility of your WebGL application across different devices involves thorough testing on a variety of hardware and software configurations. This can be facilitated by using Visual Studio emulators, which allow you to simulate different devices and environments. It’s also important to follow best practices for WebGL development, such as using feature detection and providing fallbacks for unsupported features.
What are the common challenges in debugging WebGL applications?
Debugging WebGL applications can be challenging due to the complexity of the WebGL API and the variety of hardware and software configurations it needs to support. Common challenges include diagnosing performance issues, identifying and fixing rendering errors, and ensuring compatibility across different devices and browsers.
Are there any alternatives to Visual Studio for debugging WebGL applications?
Yes, there are several alternatives to Visual Studio for debugging WebGL applications. These include browser-based tools like Chrome’s DevTools and Firefox’s WebGL Inspector, as well as standalone tools like RenderDoc and GPU PerfStudio. However, Visual Studio offers a comprehensive and integrated development environment that many developers find convenient and efficient to use.
David Rousset is a Senior Program Manager at Microsoft, in charge of driving adoption of HTML5 standards. He has been a speaker at several famous web conferences such as Paris Web, CodeMotion, ReasonsTo or jQuery UK. He’s the co-author of the WebGL Babylon.js open-source engine. Read his blog on MSDN or follow him on Twitter.