Debugging di applicazioni web Backbone con Backbone Debugger

  • 1,042 views
Uploaded on

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

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,042
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Frontend Development Debugging di applicazioni web Backbone con Backbone Debugger
  • 2. Manuel Dell’Elce @Maluen0 https://github.com/Maluen/
  • 3. Backbone Debugger INTRODUZIONE
  • 4. Perchè il web è così popolare?
  • 5. Scambio di informazioni multimediali Comunicazione e collaborazione
  • 6. Scambio di informazioni multimediali Accesso alle informazioni
  • 7. Scambio di informazioni multimediali Testo
  • 8. Scambio di informazioni multimediali Immagini
  • 9. Scambio di informazioni multimediali Audio
  • 10. Scambio di informazioni multimediali Video
  • 11. Dove porta tutto ciò?
  • 12. Le applicazioni web HTML5
  • 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. Backbone App Views Models DOM Magagement Collections Routers URL Change Usato a livello di produzione da attori quali 14
  • 15. Problema I debugger dei browser sono orientati a livello del codice eseguito e non dell’applicazione Backbone rappresentata: 15
  • 16. Una possibile soluzione: «Backbone Debugger» 16
  • 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. Backbone Debugger DEMO!
  • 19. Backbone Debugger REALIZZAZIONE
  • 20. L’estensione Chrome
  • 21. Pagina ispezionata App: l’applicazione Backbone eseguita. Backbone Agent: raccoglie informazioni sull’App. Javascript window object: il contesto globale utilizzato da entrambi.
  • 22. Backbone Agent
  • 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. Pannello dei DevTools
  • 25. Pannello dei DevTools (2)
  • 26. Elements sidebar Eseguito ogni volta che si seleziona un elemento html
  • 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. 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. 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. Architettura 30
  • 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!