path: root/files/ca/learn/css/building_blocks/depurar_el_css/index.html

---
title: Depurar el CSS
slug: Learn/CSS/Building_blocks/Depurar_el_CSS
translation_of: Learn/CSS/Building_blocks/Debugging_CSS
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>

<p>En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisits:</th>
   <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.</td>
  </tr>
 </tbody>
</table>

<h2 id="Com_accedir_a_les_eines_de_desenvolupador_del_navegador">Com accedir a les eines de desenvolupador del navegador</h2>

<p>L'article <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Què són les eines de desenvolupador dels navegadors</a> és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.</p>

<p>També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Dissenys de graella</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> i <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Formes</a>. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.</p>

<p>En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">fitxer d'exemple</a>. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.</p>

<h2 id="El_DOM_i_el_View_Source">El DOM i el View Source</h2>

<p>Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires <a href="/en-US/docs/Tools/View_source">el codi font</a> d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">la finestra HTML</a> de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.</p>

<p>En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <code>&lt;h2&gt;</code> però l’has tancat amb un <code>&lt;/h3&gt;</code>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <code>&lt;h2&gt;</code> amb l’etiqueta de tancament <code>&lt;/h2&gt;</code> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.</p>

<p>En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">arbre HTML</a> de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.</p>

<h2 id="Inspecció_del_CSS_aplicat">Inspecció del CSS aplicat</h2>

<p>Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció <em>Inspeccionar</em>, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe <code>box1</code>; aquest és el primer element de la pàgina que té una caixa que l’envolta.</p>

<p><img alt="Pàgina d'exemple per a aquest tutorial amb DevTools." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>

<p>Si observes la vista de visualització de regles, <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a>, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe <code>box1</code> i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <code>&lt;body&gt;</code>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.</p>

<p>També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada <code>margin</code>.</p>

<p><strong>Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.</strong></p>

<p><strong>Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple <code>border-radius</code> i aquell CSS deixarà d’aplicar-se.</strong></p>

<p>Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.</p>

<h2 id="Editar_els_valors">Editar els valors</h2>

<p>A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.</p>

<p><strong>Amb l’element <code>box1</code> seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.</strong></p>

<p><img alt="Taula d'estils de DevTools amb un selector de colors obert." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>

<h2 id="Afegir_una_propietat">Afegir una propietat</h2>

<p>Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <code>&lt;body&gt;</code> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.</p>

<p><strong>Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (<code>font-size</code>) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.</strong></p>

<p><img alt="El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar i editar el CSS</a>.</p>
</div>

<h2 id="Entendre_el_model_de_caixes">Entendre el model de caixes</h2>

<p>En articles anteriors hem parlat del <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">model de caixes</a> i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.</p>

<p>La <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">vista de disposició</a> mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.</p>

<p>Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (<code>box-sizing</code>), que controla quin model de caixes utilitza l'element.</p>

<p><strong>Compara les dues caixes amb les classes <code>box1</code> i <code>box2</code>. Totes dues tenen definida la mateixa amplada (400px), però <code>box1</code> és visualment més ampla. En la finestra de disseny pots veure que utilitza <code>content-box</code>. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.</strong></p>

<p>L’element amb una classe <code>box2</code> fa servir <code>border-box</code>, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: <code>width: 400px</code>.</p>

<p><img alt="La secció de compaginació dels DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Obtén més informació sobre com <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">examinar i inspeccionar el model de caixes</a>.</p>
</div>

<h2 id="Resolució_de_qüestions_despecificitat">Resolució de qüestions d'especificitat</h2>

<p>De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.</p>

<p>En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <code>&lt;em&gt;</code>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:</p>

<pre class="brush: css notranslate">em {
  color: hotpink;
  font-weight: bold;
}</pre>

<p>Per sobre de tot això, en el full d’estil hi ha una regla amb un selector <code>.special</code>:</p>

<pre class="brush: css notranslate">.special {
  color: orange;
}</pre>

<p>Com recordaràs de l'article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Cascada_i_herència">la cascada i l’herència</a> en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.</p>

<p><strong>Inspecciona l'element <code>&lt;em&gt;</code> amb la classe <code>.special</code> i DevTools et mostrarà que el color que s'aplica és <code>orange</code>, i la propietat <code>color</code> aplicada a l'<code>em</code> està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.</strong></p>

<p><img alt="Un element &lt;code>em&lt;/code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>

<h2 id="Obtén_més_informació_sobre_les_DevTools_de_Firefox">Obtén més informació sobre les DevTools de Firefox</h2>

<p>Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la <a href="/ca/docs/Tools">secció principal de DevTools</a> i consulta les <a href="/en-US/docs/Tools/Page_Inspector#How_to">Guies pràctiques</a> per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.</p>

<h2 id="Problemes_en_depurar_el_CSS">Problemes en depurar el CSS</h2>

<p>Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.</p>

<h3 id="Fes_un_pas_enrere_des_del_problema">Fes un pas enrere des del problema</h3>

<p>Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.</p>

<h3 id="Els_teus_HTML_i_CSS_són_vàlids">Els teus HTML i CSS són vàlids?</h3>

<p>Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.</p>

<ul>
 <li><a href="https://jigsaw.w3.org/css-validator/">Validador de CSS</a></li>
 <li><a href="https://validator.w3.org/">Validador d'HTML</a></li>
</ul>

<h3 id="Les_propietats_i_els_valors_són_compatibles_amb_el_navegador">Les propietats i els valors són compatibles amb el navegador?</h3>

<p>Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.</p>

<p><img alt="Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>

<p>També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.</p>

<p>{{compat("css.shape-outside")}}</p>

<h3 id="Alguna_cosa_anul·la_el_teu_CSS">Alguna cosa anul·la el teu CSS?</h3>

<p>Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.</p>

<h3 id="Fer_una_prova_reduïda_del_problema">Fer una prova reduïda del problema</h3>

<p>Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.</p>

<p>Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.</p>

<p>Per a crear una prova reduïda:</p>

<ol>
 <li>Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com <a href="https://codepen.io/">CodePen</a> és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.</li>
 <li>Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.</li>
 <li>Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.</li>
 <li>Elimina qualsevol CSS que no afecti el problema.</li>
</ol>

<p>En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.</p>

<p>Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.</p>

<p>En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web <a href="https://bugzilla.mozilla.org">bugzilla</a> de Mozilla).</p>

<p>A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>

<h2 id="En_aquest_mòdul">En aquest mòdul</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a>
  <ul>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements amb el CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li>
</ol>