Om du är ny på webbutvecklare verktyg, förstå att de inte gör några permanenta ändringar. Dina redigeringar kommer bara att synas på skärmen, och bara tills du stänger sidan eller uppdaterar den. Tveka inte att experimentera även om du inte är säker på vad som kommer att hända. Dubbelklicka på en rad HTML. Skriv in den nya texten och tryck på returtangenten för att spara dina ändringar. Kom ihåg att verktygsfältet Breadcrumb är sandwichat mellan det fullständiga HTML-trädet och det övre verktygsfältet. Klicka och håll kvar något av elementen i den här raden för att öppna en omfattande meny. Här är en ofullständig guide till dessa alternativ: "Redigera som HTML" gör noden och allt dess innehåll redigerbart i HTML-trädet, istället för att behöva redigera varje rad individuellt. "Copy Inner HTML" kopierar allt innehåll i noden, medan "Copy Outer HTML" kopierar noden också (såsom <div> eller <body> "Paste →" leder till flera alternativ för var man ska klistra in, såsom före denna nod eller efter det första barnet i noden. :hover, :active och :focus ändra utseendet på elementet när användaren interagerar med det. Den exakta effekten bestäms av CSS stilmall (redigerbar från högerrutan). För att ändra element i koden, klicka och håll HTML tills en streckad rad visas. Flytta den upp eller ner för trädet och släpp när den streckade linjen är på önskad plats. Detta kräver Firefox 39 eller senare. För att stänga alla dessa fina fönster, tryck bara X i det längst till höger hörnet av verktygsfältet, ovanför CSS rutan.
Uppdatera sidan för att börja om när som helst. Dubbelklicka på HTML för att redigera text. Klicka och håll en brödsmula för fler alternativ. Dra och släpp. Stäng utvecklarverktygsraden.