Zbystřete své smysly technickými doplňky
Princip fungování
- pomalá odezva stránky (více jak 1 vteřina na vrácení kompletního výstupu)
- pomalé SQL dotazy při zpracování požadavku (více jak 200ms na zpracování SQL příkazu)
- duplicitní SQL dotazy (špatné použití cachování)
- chyby při zpracování stránky (jak při akci, tak i v rámci renderingu) - obvykle by měly být vidět samy od sebe, ale někdy se skryjí ve <script> blocích nebo na stránce chybí komponenta pro výpis chybových hlášení
- chyby při aplikaci změn v konfiguraci (refresh Spring kontextů selhal) - jelikož se jede z poslední známé funkční konfigurace, vývojář často problém s reloadem nepostřehne a marně pátrá proč se aplikace nechová tak, jak by podle poslední konfigurace měla
- (zvažujeme) použití deprekovaných komponent a funkcí
- (plánujeme) zobrazení informace o nelokalizovaných textových popiscích na stránce
A také tyto významné informace v životním cyklu aplikace:
- vypálení události do Spring kontextu (na události navazujeme např. e-mailové notifikace a další observer akce)
- reload konfigurace (tj. aplikování změn v konfiguraci)
Realizace
<br />
{<br />
"name":"Ramjet Inspector",<br />
"version":"1.8",<br />
... další povinné informace ...<br />
"background":{<br />
"scripts": ["background.js"]<br />
},<br />
"permissions":[<br />
"cookies",<br />
"tabs",<br />
"notifications",<br />
"http://*/*",<br />
"https://*/*",<br />
],<br />
"web_accessible_resources":[<br />
"skin/INFO.png",<br />
"skin/WARNING.png",<br />
"skin/ERROR.png"<br />
]<br />
}
A takhle vypadá obsah JavaScript souboru background.js, který obstarává naslouchání na změny v cookies a následné zobrazování notifikací (soubor jsem zkrátil a upravil do srozumitelnější podoby - originál je podstatně delší):
var openNotifications = 0;
//REGISTRACE LISTENERU NA ZMĚNY V COOKIES
chrome.cookies.onChanged.addListener(function (data) {
//zajímá nás pouze vytvoření cookie
if (data.cause == "explicit" && data.removed == false) {
//s tímto názvem
if ("RAMJET_COOKIE_NOTIFICATIONS" == data.cookie.name) {
fetchAndDisplayNotifications(data.cookie);
}
}
});
//ZÍSKÁNÍ SEZNAMU NOTIFIKACÍ AJAXEM ZE SERVERU
function fetchAndDisplayNotifications(cookie) {
var xhr = new XMLHttpRequest();
var url = getUrlFromCookie(cookie);
xhr.open("GET", url, true);
xhr.onload = function () {
//o výsledek se má zajímat jen když server odpověděl OK
if (this.status == 200) {
//v JSONu nám přijde kolekce objektů
var notifications = JSON.parse(this.responseText);
for(var i in notifications) {
showNotification(notifications[i]);
}
}
};
xhr.send();
}
//ZÍSKÁNÍ URL STRINGU Z COOKIE A ÚPRAVA PROTOKOLU
function getUrlFromCookie(cookie) {
var url = cookie.value;
url = url.replace(new RegExp("\"", 'g'), "");
if("http" != url.substring(0, 4)) {
var prefix = cookie.secure ? "https://" : "http://";
url = prefix + cookie.domain + url;
}
url = url.replace(new RegExp("\"", 'g'), "");
return url;
}
//ZOBRAZENÍ NOTIFIKACE
function showNotification(serverNotification) {
//výchozí callback pouze zruší automatické zmizení notifikace
var defaultCallback = function () {
clearTimeout(timeout);
};
//notifikaci vytvoříme pouze pokud je místo na obrazovce
if (openNotifications < 3) {
var notification = window.webkitNotifications.createNotification(
'skin/' + serverNotification.severity + '.png',
'Ramjet inspector',
serverNotification.text
);
notification.show();
openNotifications++;
//po 5 vteřinách se notifikace sama zavírá
var timeout = setTimeout(function () {
notification.cancel();
openNotifications--;
}, 5000);
//tady řešíme po kliku otevření správného debug okna inspektora
notification.onclick = defaultCallback
} else {
//jinak odložíme zobrazení notifikace o 5 vteřin
setTimeout(function() { showNotification(notification); }, 5001)
}
}
A takhle vypadá obsah JSON zprávy, která odchází ze servlet filtru:
[
{
"severity": "warning",
"toolWindow": "debugger",
"toolWindowTab": "sqlQueries",
"text": "Při generování stránky se opakují 3 dotazy celkem 5x. Pravděpodobně plýtváš výkonem!"
},
{
"severity": "info",
"toolWindow": "events",
"toolWindowTab": null,
"text": "Při zpracování požadavku došlo k vyvolání události userCreated."
}
]
A dál?
Především se potřebujeme přesvědčit, že tento způsob informování vývojáře je použitelný - tedy aby ho naopak zbytečně neobtěžoval. I proto jsem vybíral k notifikaci pouze zásadní situace a problémy v souvislosti s vývojem aplikace (i když si nejsem jist třeba u notifikace pomalé odezvy stránky, která nastává často v souvislosti s debugováním). Pokud se ale osvědčí, budeme chtít udělat podobnou funkcionalitu i pro náš Firefox plugin. Firefox od verze 22 totiž již podporuje HTML 5 notifikace. Nicméně vyvíjet pluginy pro Firefox je daleko větší pruda než pro Chrome, takže ten je aktuálně až druhý v pořadí.
Co si o prototypu myslíte? Připadne vám to jako dobrý nápad?
Komentáře