Debugging di applicazioni web Backbone con Backbone Debugger
-
Upload
ivano-malavolta -
Category
Technology
-
view
1.143 -
download
1
description
Transcript of Debugging di applicazioni web Backbone con Backbone Debugger
![Page 1: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/1.jpg)
HTML5 Frontend Development
Debugging di applicazioni web Backbone con Backbone Debugger
![Page 2: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/2.jpg)
Manuel Dell’Elce
@Maluen0
https://github.com/Maluen/
![Page 3: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/3.jpg)
INTRODUZIONE
Backbone Debugger
![Page 4: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/4.jpg)
Perchè il web è così popolare?
![Page 5: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/5.jpg)
Scambio di informazioni multimediali Comunicazione e collaborazione
![Page 6: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/6.jpg)
Scambio di informazioni multimediali
Accesso alle informazioni
![Page 7: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/7.jpg)
Scambio di informazioni multimediali
Testo
![Page 8: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/8.jpg)
Scambio di informazioni multimediali
Immagini
![Page 9: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/9.jpg)
Scambio di informazioni multimediali
Audio
![Page 10: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/10.jpg)
Scambio di informazioni multimediali
Video
![Page 11: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/11.jpg)
Dove porta tutto ciò?
![Page 12: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/12.jpg)
Le applicazioni web HTML5
![Page 13: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/13.jpg)
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>
![Page 14: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/14.jpg)
14
Backbone App
Views Models Collections Routers
URL Change
Usato a livello di produzione da attori quali
DOM Magagement
![Page 15: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/15.jpg)
Problema
I debugger dei browser sono orientati a livello del
codice eseguito e non dell’applicazione Backbone
rappresentata:
15
![Page 16: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/16.jpg)
Una possibile soluzione:
«Backbone Debugger»
16
![Page 17: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/17.jpg)
Installazione e codice sorgente
• Codice sorgente e sviluppo (GitHub):
http://bit.ly/1ePQ1DV
http://www.github.com/Maluen/Backbone-Debugger/
• Installazione (Chrome Web Store):
![Page 18: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/18.jpg)
DEMO!
Backbone Debugger
![Page 19: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/19.jpg)
REALIZZAZIONE
Backbone Debugger
![Page 20: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/20.jpg)
L’estensione Chrome
![Page 21: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/21.jpg)
Pagina ispezionata
App: l’applicazione Backbone eseguita.
Backbone Agent: raccoglie informazioni sull’App.
Javascript window object: il contesto globale utilizzato da entrambi.
![Page 22: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/22.jpg)
Backbone Agent
![Page 23: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/23.jpg)
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");
});
});
![Page 24: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/24.jpg)
Pannello dei DevTools
![Page 25: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/25.jpg)
Pannello dei DevTools (2)
![Page 26: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/26.jpg)
Elements sidebar Eseguito ogni volta che si seleziona un elemento html
![Page 27: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/27.jpg)
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);
![Page 28: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/28.jpg)
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:
![Page 29: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/29.jpg)
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:
![Page 30: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/30.jpg)
30
Architettura
![Page 31: Debugging di applicazioni web Backbone con Backbone Debugger](https://reader034.fdocuments.net/reader034/viewer/2022052618/554af36cb4c9059f798b4bf4/html5/thumbnails/31.jpg)
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!