This document introduces Vorlon.js, an open-source remote debugging tool for web applications. It allows cross-browser, cross-platform debugging. Vorlon.js is based on Node.js, Passport.js, Socket.io, and Express.js. It includes 10 default plugins for tasks like inspecting the DOM, debugging with the console, monitoring network requests, and more. The document explains how to install Vorlon.js, connect a client website, and use various plugins to debug issues. It also discusses how dynamic analysis with the best practices plugin can provide more precise results than static scanning alone. Finally, it notes that Vorlon.js can be used via a proxy to quickly analyze a website across
3. Debugging na Web
No mundo mobile, ainda deixa a desejar…
• Ferramentas Proprietárias
• Chrome-Chrome, Safari-Safari, ...
• Requer conexão USB
• WeinRE
• Requer Chrome
• Não é cross-plataforma
• Não aceita plugin
• Não tão bonito… ;-)
5. Como instalar Vorlon.js (server) ? (1/2)
• Usando o NPM a partir da linha de comando:
• Clonando o repositório do GitHub:
npm install –g vorlon
vorlon
git clone https://github.com/Microsoftdx/vorlonjs
cd vorlonjs
npm install
npm start
6. Como instalar Vorlon.js (server) ? (2/2)
Usando o botão de ‘deploy to Azure’ no GitHub:
https://github.com/MicrosoftDX/Vorlonjs/blob/master/README.md
7. Conectando o cliente (website)
Modifique o código do website adicionando uma referência ao
servidor do vorlon.js
<script src="http://localhost:1337/vorlon.js"></script>
8. 10 plugins por padrão
Interactive console DOM Explorer
Object Explorer
Modernizr
XHR Panel
Resource Explorer
Network Monitor
ngInspector Unit tests
Best practices
9. DOM Explorer
• Permite navegar na estrutura
da página (DOM)
• Edição em tempo real do
HTML e CSS (atributos e prop)
• Botão de Refresh
• Layout, Computed Styles,
HTML DOM Edit
• Faz o highlight no browser
cliente quando seleciona o
elemento no DOM explorer
10. Interactive Console
• Displays all the logs from
the client
• Sortable, filterable,
searchable
• You can execute JavaScript
code on the client from
the immediate window
11. XHR Panel
• helps you get the list
of requests done
through
XMLHttpRequest.
• You can choose to
enable or disable the
recording using the
play button
12. ModernizR
• Displays a list of web
features
• Tells you which one is
available on the browser
you are testing
14. Network Monitor
• see all the network exchanges
that are done between the
browser and the web server.
• Provides the resource name, the
server domain, the type of
request, the duration in
milliseconds
• Visual waterfall
15. Resource Explorer
• What is stored locally on the
client browser instance.
• Data about :
• Sessions
• Cookies
• Local Storage
16. NGInspector
• $scope debugger for
Angular.js.
• Access to all the values
stored in each scope
• This first version gives
you information
• Edit might come later
17. Unit Tests - qUnit
• Run unit test on the client
from the dashboard
• Type your test in the box
• Browse and load a qunit
test file
• Results are displayed as a
summary
18. Enable / Disable plugins
• Config.json file on the Server Folder
• Change the « enabled » parameter from true to false on plugins
• You can enable and disable more things here like authentication
19. How to create your own plugin ?
•Tutorial available here :
•http://bit.ly/vorlonplugin
20. Using Vorlon.js to improve
web sites compatibility with
web standards
Part II
22. Best practices plugin
Dynamic analysis
More precise results than https://dev.modern.ie/tools/staticscan
Not based on text analysis
Can be extended
Slower than static analysis
24. Mobile WEB
Platform icons helps user pinning your website
with an icon that fits well on mobile device home
Use meta viewport tag to choose how your
website will get scaled on smaller devices like
phones
Be responsive
25. Performances
Content encoding like gzip or deflate helps
reducing the network bandwidth required to
display your website
Minification helps reducing the network
bandwidth required to display your website
Multiple http requests makes your site slower
26. Web standards
This portion of the plugin focus on web standards
and will dynamically check how features are used
and detected
Hands on labs:
https://github.com/deltakosh/interoperable-web-
development