• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Debugging di applicazioni web Backbone con Backbone Debugger
 

Debugging di applicazioni web Backbone con Backbone Debugger

on

  • 1,147 views

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.

Statistics

Views

Total Views
1,147
Views on SlideShare
870
Embed Views
277

Actions

Likes
2
Downloads
13
Comments
0

2 Embeds 277

http://www.ivanomalavolta.com 276
http://cloud.feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Debugging di applicazioni web Backbone con Backbone Debugger Debugging di applicazioni web Backbone con Backbone Debugger Presentation Transcript

    • 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à + Learning curve minore - Molte decisioni da prendere - Sviluppo di funzionalità «base> VS
    • Backbone App Views Models DOM Magagement Collections Routers URL Change Usato a livello di produzione da attori quali 14
    • Problema I debugger dei browser sono orientati a livello del codice eseguito e non dell’applicazione Backbone rappresentata: 15
    • Una possibile soluzione: «Backbone Debugger» 16
    • Installazione e codice sorgente • Installazione (Chrome Web Store): http://bit.ly/1ePQ1DV • Codice sorgente e sviluppo (GitHub): http://www.github.com/Maluen/Backbone-Debugger/
    • Backbone Debugger DEMO!
    • Backbone Debugger REALIZZAZIONE
    • L’estensione Chrome
    • Pagina ispezionata App: l’applicazione Backbone eseguita. Backbone Agent: raccoglie informazioni sull’App. Javascript window object: il contesto globale utilizzato da entrambi.
    • Backbone Agent
    • 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"); }); });
    • 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 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);
    • 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); } } });
    • 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' }); } } });
    • Architettura 30
    • 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!