0
HTML5 Frontend Development

Debugging di applicazioni web Backbone con
Backbone Debugger
Manuel Dell’Elce
@Maluen0
https://github.com/Maluen/
Backbone Debugger

INTRODUZIONE
Perchè il web è così popolare?
Scambio di informazioni multimediali
Comunicazione e collaborazione
Scambio di informazioni multimediali
Accesso alle informazioni
Scambio di informazioni multimediali
Testo
Scambio di informazioni multimediali
Immagini
Scambio di informazioni multimediali
Audio
Scambio di informazioni multimediali
Video
Dove porta tutto ciò?
Le applicazioni web HTML5
Framework e librerie
Framework

Librerie

+ Svluppo out of the box
- Learning curve maggiore
- Flessibilità

+ Flessibilit...
Backbone App

Views

Models
DOM Magagement

Collections

Routers

URL Change

Usato a livello di produzione da attori qual...
Problema
I debugger dei browser sono orientati a livello del
codice eseguito e non dell’applicazione Backbone
rappresentat...
Una possibile soluzione:
«Backbone Debugger»

16
Installazione e codice sorgente
• Installazione (Chrome Web Store):
http://bit.ly/1ePQ1DV

• Codice sorgente e sviluppo (G...
Backbone Debugger

DEMO!
Backbone Debugger

REALIZZAZIONE
L’estensione Chrome
Pagina ispezionata

App: l’applicazione
Backbone eseguita.
Backbone Agent: raccoglie
informazioni sull’App.
Javascript win...
Backbone Agent
DevTools
// custom panel
chrome.devtools.panels.create("Backbone Debugger", "img/panel.png",
"panel.html");
// custom side...
Pannello dei DevTools
Pannello dei DevTools (2)
Elements sidebar
Eseguito ogni volta che si seleziona un elemento html
Content Script
// Receives messages from the inspected page and redirects
// them to the background, building up the first...
Background
Registra le porte di comunicazione aperte dai pannelli,
ridirezionando su di essa i messaggi ricevuti dai Conte...
Background (2)
Utilizza le porte di comunicazione registrate per avvisare i
pannelli degli aggiornamenti delle rispettive ...
Architettura

30
Sviluppi futuri
• Modalità alternative di visualizzazione
• Una nuova scheda con tutte le azioni dell’applicazione
• Filtr...
Upcoming SlideShare
Loading in...5
×

Debugging di applicazioni web Backbone con Backbone Debugger

1,176

Published on

Slides of the talk Manuel Dell'Elce gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013.

Speaker: Manuel Dell'Elce

Abstract:
L'utilizzo di Backbone.js per lo sviluppo di applicazioni web aumenta sempre più ad ogni livello, ma chiunque l'abbia usato almeno una volta sa quanto può essere frustrante e time-consuming risolvere bug tramite il classico metodo log & breakpoint.
Nel talk viene introdotto un approccio alternativo al problema, presentando l'estensione Chrome "Backbone Debugger" per un debugging a livello di applicazione.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,176
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Debugging di applicazioni web Backbone con Backbone Debugger"

  1. 1. HTML5 Frontend Development Debugging di applicazioni web Backbone con Backbone Debugger
  2. 2. Manuel Dell’Elce @Maluen0 https://github.com/Maluen/
  3. 3. Backbone Debugger INTRODUZIONE
  4. 4. Perchè il web è così popolare?
  5. 5. Scambio di informazioni multimediali Comunicazione e collaborazione
  6. 6. Scambio di informazioni multimediali Accesso alle informazioni
  7. 7. Scambio di informazioni multimediali Testo
  8. 8. Scambio di informazioni multimediali Immagini
  9. 9. Scambio di informazioni multimediali Audio
  10. 10. Scambio di informazioni multimediali Video
  11. 11. Dove porta tutto ciò?
  12. 12. Le applicazioni web HTML5
  13. 13. Framework e librerie Framework Librerie + Svluppo out of the box - Learning curve maggiore - Flessibilità + Flessibilità + Learning curve minore - Molte decisioni da prendere - Sviluppo di funzionalità «base> VS
  14. 14. Backbone App Views Models DOM Magagement Collections Routers URL Change Usato a livello di produzione da attori quali 14
  15. 15. Problema I debugger dei browser sono orientati a livello del codice eseguito e non dell’applicazione Backbone rappresentata: 15
  16. 16. Una possibile soluzione: «Backbone Debugger» 16
  17. 17. Installazione e codice sorgente • Installazione (Chrome Web Store): http://bit.ly/1ePQ1DV • Codice sorgente e sviluppo (GitHub): http://www.github.com/Maluen/Backbone-Debugger/
  18. 18. Backbone Debugger DEMO!
  19. 19. Backbone Debugger REALIZZAZIONE
  20. 20. L’estensione Chrome
  21. 21. Pagina ispezionata App: l’applicazione Backbone eseguita. Backbone Agent: raccoglie informazioni sull’App. Javascript window object: il contesto globale utilizzato da entrambi.
  22. 22. Backbone Agent
  23. 23. DevTools // custom panel chrome.devtools.panels.create("Backbone Debugger", "img/panel.png", "panel.html"); // custom sidebar pane in the elements panel chrome.devtools.panels.elements.createSidebarPane("Backbone Debugger", function(sidebar) { chrome.devtools.panels.elements.onSelectionChanged.addListener(function() { sidebar.setHeight("35px"); sidebar.setPage("elementsSidebar.html"); }); });
  24. 24. Pannello dei DevTools
  25. 25. Pannello dei DevTools (2)
  26. 26. Elements sidebar Eseguito ogni volta che si seleziona un elemento html
  27. 27. Content Script // Receives messages from the inspected page and redirects // them to the background, building up the first step towards // the communication between the backbone agent and the panel. window.addEventListener("message", function(event) { // We only accept messages from ourselves if (event.source != window) return; var message = event.data; chrome.extension.sendMessage(message); }, false); // Sends a message to the background when the DOM of the // inspected page is ready (typically used by the panel // to check if the backbone agent is on the page). window.addEventListener('DOMContentLoaded', function() { chrome.extension.sendMessage({ target: 'page', name: 'ready' }); }, false);
  28. 28. Background Registra le porte di comunicazione aperte dai pannelli, ridirezionando su di essa i messaggi ricevuti dai Content Script: // Hash <panel tab id, panel commmunication port> var panelPorts = {}; // Panel registration chrome.extension.onConnect.addListener(function(port) { if (port.name !== "devtoolspanel") return; port.onMessage.addListener(function(message) { if (message.name == "identification") { var tabId = message.data; panelPorts[tabId] = port; } }); }); // Receives messages from the content scripts and // redirects them to the respective panels, completing // the communication between the backbone agent and the panel. chrome.extension.onMessage.addListener(function(message, sender, sendResponse) { if (sender.tab) { var port = panelPorts[sender.tab.id]; if (port) { port.postMessage(message); } } });
  29. 29. Background (2) Utilizza le porte di comunicazione registrate per avvisare i pannelli degli aggiornamenti delle rispettive pagine ispezionate: chrome.tabs.onUpdated.addListener(function(updatedTabId, changeInfo) { if (changeInfo.status == "loading") { var port = panelPorts[updatedTabId]; if (port) { port.postMessage({ target: 'page', name: 'updated' }); } } });
  30. 30. Architettura 30
  31. 31. Sviluppi futuri • Modalità alternative di visualizzazione • Una nuova scheda con tutte le azioni dell’applicazione • Filtrare e raggruppare i risultati visualizzati • Personalizzazione dell’interfaccia tramite file di configurazione globali o specifici per la singola applicazione Oppure... Github -> New issue!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×