Debugging di applicazioni web Backbone con Backbone Debugger
-
Upload
ivano-malavolta -
Category
Technology
-
view
1.134 -
download
1
description
Transcript of Debugging di applicazioni web Backbone con Backbone Debugger
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!