Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.4 - Complements de depuració del navegador

Índex de continguts
1. Introducció.......................................................................................................2
2. Complements de depuració del codi...............................................................2
2.1. Complements vàlids per a tots els navegadors............................................2
2.2. Complements vàlids per a Mozilla Firefox....................................................2
2.3. Complements vàlids per a Microsoft Internet Explorer.................................3
2.4. Complements vàlids per a Chrome..............................................................4
2.5. Complements vàlids per a Opera.................................................................4
3. Eines de comentació del codi: jsDoc...............................................................4
3.1. Etiquetes del jsDoc.......................................................................................5
4. Per saber-ne més............................................................................................5

Pàgina 1 de 6
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.4 - Complements de depuració del navegador

1. Introducció.
Parlar de complements de depuració significa parlar d’eines que ajuden al
programador a detectar errors en el codi i/o optimitzar-lo. Que un programa funcioni
correctamnet no vol dir que el programa estigui codificat de manera òptima i per tant a l’hora de
mantenir-lo pot complicar-se i podria donar-se el cas de tenir que fer-lo de nou degut a ser un
codi no optimitzat.

Documentar un programa també és molt important, principalment de cara al

manteniment de l’aplicació. Molt sovint l’aplicació és desenvolupada per un equip de
programadors per després ser mantenida per un altre, si l’aplicació no estigués correctament
documentada podria fer-se complicat modificar-la si cal per l’equip que realitza el mantiment.

2. Complements de depuració del codi.

Els complements (add-ins o connectors) pels navegadors afegeixen funcions que
faciliten el desenvolupament de les pàgines web, com consultar les propietats CSS que té un
element de la pàgina web, o permetre la utilització d'algun servei a Internet, com la validació del
codi HTML o CSS d'una pàgina.

A continuació s'inclou una llista de complements per als navegadors Chrome, Microsoft
Internet Explorer, Mozilla Firefox i Opera.

2.1. Complements vàlids per a tots els navegadors.

- Complex Table Inspector: un favelet (petit fragment de codi JavaScript que
s'emmagatzema com "favorit" al navegador) que permet visualitzar la informació sobre una
taula que sol estar oculta en els navegadors visuals: summary, headers, axis, scope i abbr
(http://juicystudio.com/article/complextableinspector.php).

- Favelets For The Validator: diversos favelets del W3C que permeten validar el codi
HTML de la pàgina que s'està visualitzant (http://validator.w3.org/favelets.html).

- NCAM Accessibility QA Favelet: un favelet que realitza diverses anàlisis que

permeten localitzar problemes d'accessibilitat en una pàgina web
(http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/favelet).

2.2. Complements vàlids per a Mozilla Firefox.

La pàgina web Web Accessibility Testing Tools ofereix una llista de complements del
Firefox classificats com a eines d'avaluació de l'accessibilitat web.

- Firebug: és una extensió de Firefox creada i dissenyada especialment per a

desenvolupadors i programadors web. És un paquet d'utilitats amb el qual es pot analitzar
(revisar velocitat de càrrega, estructura DOM), editar, monitoritzar i depurar el codi font, CSS,
HTML i JavaScript d'una pàgina web de manera instantània i inline.

Firebug no és un simple inspector com DOM Inspector, a més edita i permet guardar
els canvis, un pas per davant del conegut Web Developer. La seva atractiva i intuïtiva interfície,
amb solapes específiques per a l'anàlisi de cada tipus d'element (consola, HTML, CSS, Script,
DOM i xarxa), permet a l'usuari un maneig fàcil i ràpid. Firebug està encapsulat en forma de

Pàgina 2 de 6
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.4 - Complements de depuració del navegador
plug-in o complement de Mozilla, és Open Source, lliure i de distribució gratuïta.

- Checky: valida i analitza documents que contenen HTML, XHTML, CSS i altres
llenguatges (http://checky.sourceforge.net/extension.html).

- Complex Table Mark-up (com tab) Toolbar: ajuda a crear taules accessibles:
mostra els atributs headers i aneu en taules complexes; crea el marcat perquè una taula sigui
accessible, tant de forma manual com automàtica; crea una versió lineal d'una taula
(http://www.visionaustralia.org.au/info.aspx?page=1812).

- Fangs - the screen reader emulator: crea una versió textual d'una pàgina web
similar a com llegeix la pàgina un lector de pantalles. Afegeix un menú contextual al navegador
que obre una nova finestra on es pot veure la versió textual, la llista de capçaleres i la llista
d'enllaços de la pàgina (http://www.standards-schmandards.com/projects/fangs/).

- HeadingsMap: crea un índex o mapa de les capçaleres d'una pàgina web. A més,
aquest complement permet navegar per la pàgina web saltant d'una capçalera a un altre, tal
com ho fan els usuaris que utilitzen un lector de pantallas (https://addons.mozilla.org/es-
es/firefox/addon/headingsmap/).

- IE View: permet veure una pàgina web dins de Firefox a través del motor de
Microsoft Internet Explorer (http://ieview.roub.net/).

- Link Widgets: facilita la navegació entre pàgines que formen una seqüència en
afegir una barra de botons per anar a la primera, anterior, següent i última pàgina. Per a això
empra l'etiqueta <link> o ho endevina a partir del text dels enllaços
(https://addons.mozilla.org/es-ES/firefox/addon/2933).

- Table Inspector: visualitza la informació sobre una taula que sol estar oculta en els
navegadors visuals: summary, headers, axis, scope i abbr. Més informació: Table Inspector -
Mozilla / Firefox Extension (https://addons.mozilla.org/en-US/firefox/addon/table-inspector/).

- Web Developer: afegeix un menú i una barra d'eines amb nombroses opcions que
ajuden a desenvolupar pàgines web. A més, tal com s'explica en Avaluació de l'accessibilitat de
llocs web amb la barra d'eines de Firefox Web Developer Toolbar, aquest complement es pot
emprar per revisar l'accessibilitat d'un lloc web (http://chrispederick.com/work/web-developer/).

- X-Ray: permet visualitzar les etiquetes HTML d'una pàgina web sobre la mateixa
pàgina web, sense haver de veure el codi font (https://addons.mozilla.org/es-
ES/firefox/addon/x-ray/).

2.3. Complements vàlids per a Microsoft Internet

Explorer.
- CheckIE: la versió per a Internet Explorer de Checky. Reuneix diversos serveis
d'avaluació i reparació disponibles en línia que faciliten als dissenyadors i desenvolupadors de
llocs web la revisió de la qualitat dels seus treballs. Per exemple, es pot validar l'etiquetatge
d'una pàgina o el seu full d'estils CSS amb les especificacions del W3C, revisar el seu nivell
d'accessibilitat mitjançant TAW o Bobby, i tot des del propi menú del navegador, sense haver
de dirigir-se al lloc específic de cada servei (http://checkie.orange-soft.com/index.htm).

- DebugBar: conté les següents utilitats: DOM Inspector (visualitza i permet modificar
etiquetes i atributs de CSS), HTTP Inspector (visualitza les peticions HTTP / S, les galetes i els
paràmetres passats per GET i POST), Javascript Inspector i Javascript Console, HTML
Validator i altres funcions. És gratuït per a ús personal (http://www.debugbar.com/?

Pàgina 3 de 6
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.4 - Complements de depuració del navegador
langage=en).

- Internet Explorer Developer Toolbar: proporciona un conjunt d'eines per validar la

sintaxi de l'HTML i el CSS d'una pàgina, explorar i modificar el DOM d'una pàgina, mostrar
informació sobre les imatges d'una pàgina com les seves dimensions o el seu text alternatiu,
visualitzar i esborrar les galetes d'una pàgina, etc
(http://www.microsoft.com/download/en/default.aspx).

- Web Accessibility Toolbar: ajuda a inspeccionar les pàgines web i comprovar si es

compleixen els criteris d'accessibilitat. Entre altres coses, permet: identificar els components
d'una pàgina web, facilita l'ús d'aplicacions en línia, simula l '"experiència" d'alguns tipus
d'usuaris (bàsicament, usuaris amb algun problema de visió) i només enllaça a guies de
referència i altres recursos. La pàgina Toolbar and WCAG 1.0 explica com es pot emprar
aquesta eina per comprovar els punts de verificació de WCAG 1.0.
Complements de depuració en IDE’s (http://www.paciellogroup.com/resources/wat-ie-
about.html).

2.4. Complements vàlids per a Chrome.

- Chrome Web Developer Tools: un clon del complement Web Developer per a
Mozilla Firefox (https://chrome.google.com/webstore/detail/fbmlldeibipeppiabbdjajcneipfbocm?
hl=es).

- IE Tab: permet veure una pàgina web dins de Chrome a través del motor de
Microsoft Internet Explorer
(https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=es).

- Web Developer: l'autèntica, la barra d'eines per a Mozilla Firefox, també disponible
per a Google Chrome. Afegeix un menú i una barra d'eines amb nombroses opcions que
ajuden a desenvolupar pàgines web. A més, tal com s'explica en Avaluació de l'accessibilitat de
llocs web amb la barra d'eines de Firefox Web Developer Toolbar, aquest complement es pot
emprar per revisar l'accessibilitat d'un lloc web
(https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=es).

2.5. Complements vàlids per a Opera.

- Web Accessibility Toolbar: ajuda a inspeccionar les pàgines web i comprovar si es
compleixen els criteris d'accessibilitat. Entre altres coses, permet: identificar els components
d'una pàgina web, facilita l'ús d'aplicacions en línia, simula l '"experiència" d'alguns tipus
d'usuaris (bàsicament, usuaris amb algun problema de visió) i només enllaça a guies de
referència i altres recursos (www.paciellogroup.com/resources/wat-about.html).

- Web Developer Toolbar & Menu for Opera: Menú i barra d'eines de
desenvolupament (http://operawiki.info/WebDevToolbar).

3. Eines de comentació del codi: jsDoc.

JSDoc és una sintaxi per afegir documentació de l'API al codi font de JavaScript.

La sintaxi JSDoc és similar a la sintaxi de Javadoc, usat per documentar el codi de

Java, però s'ha especialitzat per treballar amb la sintaxi de JavaScript, és més dinàmic i, per
tant únic, ja que no és totalment compatible amb Javadoc. No obstant això, com Javadoc,
JSDoc permet al programador crear Doclets i Taglets que després es poden traduir en formats
com HTML o RTF.

Pàgina 4 de 6
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.4 - Complements de depuració del navegador
3.1. Etiquetes del jsDoc.
Etiqueta Descripció
@author Nom de l'autor.
@constructor Indica el constructor.
@deprecated i indica que aquest mètode és deprecated.
@exception sinònim de @ throws.
@param paràmetres de documents i mètodes.
@private indica que el mètode és privat.
@return indica que retorna el mètode.
@see Indica l'associació amb un altre objecte.
@throws Indica l'excepció que pot llançar un mètode.
@version indica el nombre de versió o llibreria.

Exemples:
/**
* Creates an instance of Circle.
*
* @constructor
* @this {Circle}
* @param {number} r The desired radius of the circle.
*/
function Circle(r) {
/** @private */ this.radius = r;
/** @private */ this.circumference = 2 * Math.PI * r;
}

/**
* Returns the pre-computed circumference of the Circle.
*
* @this {Circle}
* @return {number} The circumference of the circle.
*/
Circle.prototype.getCircumference = function () {
return this.circumference;
};

/**
* Find a String representation of the Circle.
*
* @override
* @this {Circle}
* @return {string} Human-readable representation of this Circle.
*/
Circle.prototype.toString = function () {
return "A Circle object with radius of " + this.radius + ".";
};

Pàgina 5 de 6
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.4 - Complements de depuració del navegador
4. Per saber-ne més.
- S’ha fet una referència a diferents pàgines al llarg de tot el NF, es en cadascuna
d’aquestes pàgines on podreu trobar-hi informació al respecte.

Pàgina 6 de 6