HTML5 Frontend Development

Debugging di applicazioni web Backbone con Backbone Debugger

Manuel Dell’Elce

@Maluen0

https://github.com/Maluen/

INTRODUZIONE

Backbone Debugger

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

VS

Framework

+ Svluppo out of the box

- Learning curve maggiore

- Flessibilità

Librerie

+ Flessibilità

+ Learning curve minore

- Molte decisioni da

prendere

- Sviluppo di funzionalità

«base>

14

Backbone App

Views Models Collections Routers

URL Change

Usato a livello di produzione da attori quali

DOM Magagement

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

• Codice sorgente e sviluppo (GitHub):

http://bit.ly/1ePQ1DV

http://www.github.com/Maluen/Backbone-Debugger/

• Installazione (Chrome Web Store):

DEMO!

Backbone Debugger

REALIZZAZIONE

Backbone Debugger

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

// 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);

}

}

});

Registra le porte di comunicazione aperte dai pannelli, ridirezionando su di essa i messaggi ricevuti dai Content Script:

Background (2)

chrome.tabs.onUpdated.addListener(function(updatedTabId, changeInfo) {

if (changeInfo.status == "loading") {

var port = panelPorts[updatedTabId];

if (port) {

port.postMessage({

target: 'page',

name: 'updated'

});

}

}

});

Utilizza le porte di comunicazione registrate per avvisare i pannelli degli aggiornamenti delle rispettive pagine ispezionate:

30

Architettura

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!