Ik wil toegeven dat ik een grote fan ben van browsergebaseerde ontwikkelaarstools. Dit is echt een geheim superwapen voor webontwikkelaars.

Zonder hen zouden we met wanhopige ogen naar een webpagina staren, in een poging erachter te komen waarom elementen niet uitgelijnd zijn, waarom afbeeldingen niet worden geladen en waarom andere, complexere dingen niet werken.

Ik ben onlangs overgestapt naar dagelijks gebruik Firefox en besefte dat ik vrijwel niets wist over Firefox-ontwikkelaarstools. Bovendien besefte ik hoeveel ze de afgelopen jaren zijn verbeterd! Maar ze worden vaak genegeerd in hoofdartikelen. Naar mijn mening is dit oneerlijk en daarom beschouwde ik het als mijn plicht om u hierover te vertellen.

En nu is er een artikel verschenen waarin enkele van deze hulpmiddelen worden belicht, plus visuele gifs om het lezen minder saai te maken.

Trucs met schermafbeeldingen

Screenshot van de hele pagina

Open het paneel Webontwikkeling in uw browser. Selecteer "Ontwikkelaarstools" in de lijst. Klik op het tabblad 'Hulpmiddelen aanpassen' en vink het vakje aan naast 'Maak een screenshot van de hele pagina'. Klik vervolgens op de werkbalk op het camerapictogram. Er wordt een screenshot van de pagina opgeslagen in de standaardmap met de huidige paginabreedte.

Schermafbeelding van het knooppunt

Open het tabblad "Developer Tools", selecteer de "Inspector" -modus en schakel vervolgens links van deze modus de functie "Selecteer element van pagina" in. Nu kunt u het knooppunt vinden dat u nodig heeft, klik erop klik met de rechtermuisknop muis en selecteer “Screenshot van knooppunt”.

Een klasse uit een element verwijderen

Soms heeft een element meerdere klassen en kun je niet meteen begrijpen welke klasse verantwoordelijk is voor een bepaald attribuut. Door het element in het Inspector-paneel te selecteren en op de knop ".cls" aan de rechterkant te klikken bovenste hoek Regelpaneel, kunt u een lijst met alle klassen zien en deze eenvoudig uitschakelen/opnieuw inschakelen.

Sleep heen en weer in het infovenster

In het infovenster kunt u elk HTML-element slepen en de positie ervan op de pagina wijzigen. Gewoon knijpen linker knop muis aan het begin van de regel, zou er een handpictogram moeten verschijnen, dan kunt u grote schade aanrichten op de webpagina.

Sneltoetsen voor Selectors-API

Nog één coole functie"Console" zijn de sneltoetsen voor de Selectors API. We keren terug naar de "Console" en voeren in:

$ ()  - sneltoets voor document.querySelector()

$$() - sneltoets voor document.querySelectorAll()

Gebruik de waarde van de laatste bewerking in de “Console”

Gebruik $_ om terug te keren naar de waarde van een eerdere bewerking uitgevoerd in de “Console”

Klik met de rechtermuisknop op een element in de Inspector en selecteer 'Gebruik in console'. Het wordt toegewezen aan een tijdelijke variabele.

JavaScript debuggen

Je kunt installeren controlepunten en expressies die u in de JS-bronbestanden in het Debugger-paneel van Developer Tools kunt bekijken, zodat u vervolgens alle wijzigingen kunt zien die plaatsvinden.

Door de pagina opnieuw te laden blijven de breekpunten en trackingexpressies ongewijzigd en blijft het script op de gewenste positie staan.

Chrome is een van de meest populaire browsers huidige moment. Het biedt comfortabele omgeving voor een ontwikkelaar met veel nuttige functies. Googlen Chrome-ontwikkelaarstools is een officiële tool waarmee ontwikkelaars meer kunnen krijgen volledige toegang naar de browser en applicatie.

Kenmerken van DevTools

Hier kunt u de weergave van de site daadwerkelijk testen verschillende apparaten, HTML en CSS direct bewerken, prestaties meten individuele gebieden, JavaScript debuggen.

Ook om met individuele chips te werken, wilt u misschien gebruiken Google Chrome Kanarie – experimenteel Chrome-versie. Deze versie kan eenvoudig naast gewoon Chrome worden gebruikt.

Voor gebruik en experimenten met aparte gereedschappen ontwikkelaar die je nodig hebt adresbalk browser invoeren

en selecteer alle benodigde hulpmiddelen.

MET volledige set Bekijk de mogelijkheden op de officiële website.

Hoe open ik de ontwikkelaarstool?

Om dit te doen, kunt u een van de opties gebruiken:

1. Via het browsermenu

Open het menu door op het pictogram te klikken, klik op 'Meer tools' en selecteer 'Developer Tools'.

1. Via rechtermuisknop

Klik met de rechtermuisknop op een pagina-element en selecteer ‘Element inspecteren’.

1. Sneltoetsen gebruiken

Druk op de sneltoets, afhankelijk van uw besturingsomgeving

• Ramen: F12 of ook Ctrl+Shift+I
• Mac: Cmd+Opt+I

Tips en trucs voor het werken met ontwikkelaarstools.

Hier zijn slechts enkele van de vele beschikbare opties. Voor sommigen van hen wordt Kanarie gebruikt.

Navigeer snel door bestanden.

IN geopend tabblad met bronbestanden klik combinatie Ctrl+ P (Cmd + P) en zoek naar de benodigde bestanden.

Opmaak met ()

Door op () te klikken kunt u de opmaak van de broncode wijzigen en terugkeren naar de normale weergave.

Een HTML-element bewerken

U kunt HTML direct bewerken door een element in de DOM te selecteren en erop te dubbelklikken. Sluitingstags worden automatisch bewerkt. Alle wijzigingen worden onmiddellijk doorgevoerd.

CSS-eigenschappen bewerken

Net als HTML kun je CSS op dezelfde manier bewerken.

Zoeken in broncode

Je kunt snel zoeken broncode door te gebruiken combinaties Ctrl+ Shift + F (Cmd + Opt + F), en zoek ook via css-selector door op Ctrl + F (Cmd + F) te drukken.

Breekpunten in Javascript Breekpunten

Bij het debuggen van Javascript is het vaak handig om breakpoints te gebruiken. In de ontwikkelaarstool kunt u het regelnummer selecteren waar u wilt stoppen en op Ctrl + R (Cmd + R) drukken om de pagina opnieuw te laden. Op dit punt wordt de download onderbroken.

Spring op regelnummer

Door op Ctrl + O (Cmd + O) te drukken en te gebruiken speciale syntaxis, waar u snel terecht kunt de gewenste lijn. In het voorbeeld heb je ingevoerd: 200:10, wat betekent dat de overgang naar regel 200 en kolom 10 gaat.

Veel cursors

Als u tegelijkertijd waarden op meerdere plaatsen wilt invoeren of dezelfde lettergrootte wilt bewerken, kunt u door op Ctrl + klikken (Cmd + klikken) te drukken tegelijkertijd informatie op verschillende plaatsen invoeren.

Het wijzigen van de raampositie

Het DevTools-venster heeft drie posities: aan de ene kant, onderaan en zwevend. Je kunt hiertussen schakelen met Ctrl + Shift + D (Cmd + Shift + D) of via een speciaal menu in de rechterbovenhoek van het venster.

Cookies wissen

Om met plug-ins van derden te kunnen werken, is het soms nodig om cookies te verwijderen. Op het tabblad “Bronnen” kunt u de benodigde cookies vinden en deze verwijderen via het contextmenu.

Testen op verschillende apparaten

Als je dat hebt responsief ontwerp, dan kunt u uw applicatie op verschillende apparaten testen. Met deze modus kunt u controleren op lay-outproblemen mobiele apparaten ah of op verschillende maten browser. Om deze modus te openen, drukt u op of een combinatie Ctrl-toetsen+ Shift + M (Cmd + Shift + M). Daar kun je kiezen benodigde apparaat, schermoriëntatie en -grootte.

Kleurenpallet en pipet

Door in CSS-stijlen op te klikken gewenste kleur In de opmaak komt u meteen in het kleurenpalet terecht, waar u voor ieder element een kleur kunt kiezen die bij uw ontwerp past. Met behulp van het pipet kunt u snel de kleur van elk element op de pagina zien.

Kleurformaat wijzigen

Je kunt schakelen tussen verschillende kleurendisplays: RGBA, HSL en hexadecimaal. Als u op Shift + klik op een kleurblok drukt, verandert het formaat.

Touchscreen-emulatie

Een coole DevTools-functie helpt het touchscreen en de accelerometer te simuleren. Volg hiervoor het pad “Console -> Emulatie -> Sensoren”.

Schakelen tussen elementstatussen

Het is vaak nodig om de verborgen stijl te controleren, zoals het :hover attribuut. In Firefox kunt u via de lokale ontwikkelomgeving deze direct testen wanneer deze wordt aangeroepen. Maar in Chrome is het anders. Er bestaat zoiets als ‘schakelelementstatus’. Hiermee kunt u de eigenschappen van een attribuut rechtstreeks in het stijlpaneel bekijken.

Afbeelding opslaan als gegevens-URI (base64-codering)

U kunt de afbeelding van de pagina opslaan als een gegevens-URI of deze converteren naar base64. Het is niet nodig om er een te gebruiken diensten van derden. Ga hiervoor naar het tabblad “Netwerk” en selecteer gewenst beeld, klik er met de rechtermuisknop op en klik op “Afbeelding kopiëren als gegevens-URL”.

Bekijk User Agent Shadow DOM

Wanneer u met besturingselementen zoals een knop of invoerregel werkt, voegt de browser automatisch verborgen attributen toe. Om ze te zien, drukt u op F1 (?) en selecteert u 'Weergeven gebruikersagent DOM". Zoals in het voorbeeld te zien is, verscheen onze DOM-boom verborgen attribuut#schaduwwortel div. Nu kunt u er indien nodig enkele CSS-stijlen aan toevoegen.

Volgende gebeurtenis selecteren

Wanneer u dezelfde eigenschap voor meerdere elementen moet wijzigen, kan een ontwikkelaarstool dit proces versnellen. Dubbelklik op de gewenste eigenschap en gebruik Ctrl + D (Cmd + D) om alle vereiste exemplaren te markeren. Als u nu de waarde op één plaats verandert, verandert deze tegelijkertijd op andere geselecteerde plaatsen.

Werkomgeving

Wanneer u iets wijzigt in de ontwikkelaarstool, verdwijnt standaard alles wanneer de pagina opnieuw wordt geladen. Via de werkomgeving kunt u de benodigde wijzigingen op schijf opslaan. Klik met de rechtermuisknop op de map en klik in het menu op “Map toevoegen aan lokale werkruimte”, doe vervolgens hetzelfde voor het gewenste bestand, maar klik in het menu op “Map to bestandssysteem bron...".

Filmstrip laden

Je kunt de coole mogelijkheid om een ​​filmstrip van staten te maken niet negeren tijdens het laden van je site. Om te controleren hoe uw site wordt weergegeven tijdens elke fase van het laden, gaat u naar het paneel "Netwerk", klikt u met de camera op de afbeelding en drukt u vervolgens op Ctrl + R (Cmd + R) om de pagina opnieuw te laden. Als gevolg hiervan ontvangt u op elk moment schermafbeeldingen van het laden van uw pagina.

DOM-laadtijd

Met Chrome DevTools kunt u de laadsnelheid van de DOM-structuur en de algehele laadsnelheid van de pagina controleren. Ga hiervoor naar het tabblad “Netwerk”, klik op “Toon overzicht” en druk op Ctrl + R (Cmd + R) om de pagina opnieuw te laden. De blauwe lijn toont de laadtijd van de DOM-structuur en de rode lijn toont de totale tijd. Alles aan de linkerkant en op de blauwe lijn blokkeren het laden van de DOM en veroorzaken een trage weergave van de pagina.

Netwerksnelheidsprofielen

Om het laden van de applicatie te testen door mobiel netwerk of in omstandigheden met beperkte internetsnelheid is het mogelijk om een ​​speciaal profiel aan te maken, dat dit aangeeft vereiste snelheid downloads. Ga hiervoor naar het vervolgkeuzemenu “Throttling” op het tabblad “Netwerk” en klik op “Een aangepast profiel toevoegen...” om uw eigen profiel aan te maken of selecteer een van de voorgestelde profielen.

Beveiligingspaneel

Met behulp hiervan kunt u de migratie naar HTTPS testen en mogelijke waarschuwingen snel oplossen. Ga naar het paneel "Beveiliging" en druk op Ctrl + R (Cmd + R). Groente Veilige scripts worden gemarkeerd en verdachte scripts worden rood gemarkeerd.

Google AMP HTML-validatie

Ontwikkeltools van Firefox gebruiken in Google Chrome

Als je toevallig een ontwikkelaarstool van Firefox nodig hebt, kun je Valence proberen, een experimentele plug-in van het Firefox-team. Het is bedoeld voor het debuggen verschillende browsers. Vereist Chrome-versie 37 en hoger.

Op OSX kunt u bijvoorbeeld de foutopsporingsversie van Chrome uitvoeren met de volgende opdracht

Hallo, lieve vrienden. Het ontwikkelaarspaneel (console) in de browser is onmisbaar hulpmiddel voor iedere website-eigenaar waarmee je snel kunt bekijken html-code pagina's en CSS-stijlen. En ontdek ook welke fouten zijn opgetreden bij het laden van de site en controleer de site op aanpasbaarheid.

Vandaag zullen we overwegen om te werken met html-code, CSS-stijlen en aanpassingsvermogen in het ontwikkelaarspaneel. Dit zijn de hulpmiddelen die nodig zijn om de meeste problemen op te lossen.

Voor gemeenschappelijk begrip Ik zal u een voorbeeld geven van wanneer u het ontwikkelaarspaneel mogelijk nodig heeft.

Stel dat je naar mijn blog bent gekomen en geïnteresseerd bent in welk lettertype ik gebruik, welke kleur enzovoort. Over het algemeen kan dit elk element op de site zijn. En u wilde hetzelfde doen op uw website.

Vervolgens kijk je via het ontwikkelaarspaneel in de browser naar het gewenste element, waar je de html-code en css-stijlen ervoor kunt zien.

Een andere mogelijkheid om het paneel te gebruiken is wanneer je iets op de site wilt doen, maar nog niet weet hoe het eruit zal zien.

In dit geval kunt u ook het ontwikkelaarspaneel gebruiken en zien hoe uw idee er in de browser uit zal zien. Alles wat u in het ontwikkelaarspaneel doet, is immers alleen voor u zichtbaar. En om bezoekers uw experimenten te laten zien, moet u stijlen en codes overbrengen naar de sitebestanden.

Het webmasterpaneel openen en kennis maken met de interface

Het ontwikkelaarspaneel is in elke versie aanwezig moderne browser. Om het te openen, moet u op de F12-toets op uw toetsenbord drukken.

Paneelinterface in verschillende browsers zal anders zijn, maar de werkingsprincipes zijn vergelijkbaar.

Ik geef de voorkeur aan het paneel in de Firefox-browser.

Het paneel zelf is verdeeld in twee helften en bevat tabbladen en hulpmiddelen voor werk.

In het paneel kunt u de HTML-code van de pagina bekijken en deze daar bewerken. Om dit te doen, selecteert u het gewenste element, klikt u met de rechtermuisknop en selecteert u in het menu "Bewerken alsHTML-code (BewerkingalsHTML)".

Om met stijlen te werken, moet je naar het gedeelte van het CSS-paneel gaan, waar je stijlen kunt toevoegen of bestaande kunt uitschakelen door het selectievakje ernaast te verwijderen. Alles kan veranderd worden.

Hier kunt u zien in welk bestand de stijlen zich bevinden en op welke regel.

Hoe u een HTML-element op een website analyseert en de CSS-stijlen ervan ontdekt

Laten we naar mijn voorbeeld kijken, dat zich in elk artikel bevindt.

Om het gewenste element te analyseren, moet u er met de rechtermuisknop op klikken en het menu-item selecteren .

Het hele principe van het werken met code in het paneel is dat je de HTML-code in het linkervenster moet selecteren, en in het rechtervenster zullen er stijlen voor dit element zijn.

En als alles vrij eenvoudig is met stijlen, dan moet je bij het werken met html-code de integriteit ervan begrijpen. Dat wil zeggen, elk element heeft tags waarin het zich bevindt. Dit kunnen paragrafen, links, afbeeldingen, enzovoort zijn. Meestal zijn dit DIV-blokken met een openingstag < div> en sluiten div>. En dit is allemaal duidelijk zichtbaar in het paneel.

Bij het kopiëren of bewerken is het belangrijk om te begrijpen waar een blok begint en waar het eindigt. Als u hier de kleinste fout maakt, kan de hele lay-out van de sjabloon worden verstoord.

In de video-tutorial ga ik hier dieper op in. En als je het snel onder de knie wilt krijgen basiskennis voor html en css raad ik je aan om naar de pagina te gaan "Gratis" en download cursussen van Evgeniy Popov.

Hoe html-code van het paneel naar sitebestanden te kopiëren

Er kunnen veel ideeën zijn voor het gebruik van het ontwikkelaarspaneel. Na het experimenteren in het panel moet het resultaat worden overgebracht naar de sitebestanden. En hier schuilt een zekere moeilijkheid. Feit is dat het paneel html-code weergeeft en dat de meeste moderne sites, inclusief die op het WordPress-platform, worden gemaakt met behulp van de taal PHP-programmering. En dit is als hemel en aarde.

Laten we dus eens kijken naar een voorbeeld van het kopiëren van een banner van mijn blog en deze overbrengen naar een andere site.

Om dit te doen, moet u het ontwikkelaarspaneel openen en het gewenste element onderzoeken. Nadat u het begin van het DIV-blok hebt bepaald, drukt u op de rechterknop van het voorste vizier en selecteert u het menu-item "Extern kopiërenHTML"

De code is naar het klembord gekopieerd en nu moet je deze plakken waar je deze banner wilt zien.

Dit proces is vrij moeilijk te beschrijven, dus ik raad aan om een ​​video-tutorial te bekijken waarin alles in detail wordt uitgelegd en getoond.

Stijlen overbrengen van het ontwikkelaarspaneel naar sitebestanden

Zodra u de code en stijlen heeft bepaald, kunt u beginnen met het overbrengen ervan naar de sitebestanden. Omdat al deze wijzigingen voorlopig alleen voor u zichtbaar zijn in de browser, en als u de pagina vernieuwt, verdwijnen alle wijzigingen.

, voor mij is het handiger. Omdat er bij het werken in Notepad ++ codemarkering en regelnummering zijn. En dit helpt enorm als u niet alleen stijlen moet kopiëren, maar ook wijzigingen in bestaande stijlen moet aanbrengen. Deze stijlen zijn gemakkelijk te vinden op regelnummer.

Hoe u de responsiviteit van sjablonen kunt controleren in het ontwikkelaarspaneel

Om het paneel naar de adaptieve modus te schakelen, moet u op de toetsencombinatie CTRL+SHIFT+M drukken of op de knop in het ontwikkelaarspaneel, dat zich in verschillende browsers anders bevindt.

Conclusie

In dit artikel heb ik niet naar alle tools van het ontwikkelaarspaneel gekeken, maar alleen naar de tools die nuttig kunnen zijn en die het vaakst door veel webmasters worden gebruikt.

Het gebruik van het panel en vaardigheden in het werken met code en stijlen zijn onmisbaar bij het werken met websites en partnerprogramma's.

Neem de tool in gebruik, u zult er nog vele malen profijt van hebben.

Als u vragen heeft, beantwoord ik deze graag in de opmerkingen.

Vrienden, ik wens jullie succes. Tot ziens in nieuwe artikelen.

Met vriendelijke groet, Maxim Zaitsev.

• Vertaling

Tegenwoordig is Google Chrome het meest populaire browser onder webontwikkelaars. Met een snelle releasecyclus van zes weken en een krachtige reeks steeds groter wordende ontwikkelaarstools is de browser een onmisbare tool geworden. De meesten van jullie zijn waarschijnlijk bekend met veel van de functies ervan, zoals live CSS-bewerking met behulp van de console en debugger. In dit artikel bekijken we 15 spannende tips en trucs die uw productiviteit nog verder zullen verbeteren.

1. Snel bestanden wijzigen

Als je Sublime Text hebt gebruikt, dan zou je waarschijnlijk niet kunnen leven zonder "Ga naar alles" ( Noot van de vertaler: voor Idea-gebruikers heet deze functie "Overal zoeken" en wordt aangeroepen dubbelklikken Shift-toetsen). Je zult blij zijn te weten dat er een vergelijkbare functie is in de ontwikkelaarstools. Druk op Ctrl + P (Cmd + P voor Mac-gebruikers) wanneer het ontwikkelaarspaneel geopend is, om snel elk bestand in uw project te vinden en te openen.

2. Zoek in de broncode

Maar wat als u in de broncode wilt zoeken? Om alle gedownloade bestanden op een pagina te doorzoeken, drukt u op Ctrl + Shift + F (Cmd + Opt + F). Deze zoekmethode ondersteunt ook zoeken in reguliere expressies.

3. Ga naar lijn

Nadat u een bestand op het tabblad Bronnen hebt geopend, kunt u met de ontwikkelaarstools naar elke regel in het bestand springen. Om dit te doen, drukt u op Ctrl + G voor Windows en Linux (of Cmd + L voor Mac) en voert u het regelnummer in.

Een andere manier is om op Ctrl + O te drukken, maar in plaats van de zoektekst typt u : ' en het regelnummer ( Noot van de vertaler: of u kunt nog verder gaan en de bestandsnaam en het regelnummer invoeren met behulp van : ' als scheidingsteken ertussen, terwijl het invoeren van de volledige bestandsnaam helemaal niet nodig is, dit is een zoekopdracht).

4. DOM-elementen ophalen met behulp van de console

De Developer Tools-console ondersteunt verschillende handige magische functies en variabelen voor het ophalen van DOM:

• $() - gelijk aan document.querySelector(). Retourneert het eerste overeenkomende element CSS-kiezer$("DIV") zal bijvoorbeeld de eerste retourneren DIV-element op de pagina.
• $$() - gelijk aan document.querySelectorAll(). Geeft een lijst met elementen terug ( Noot van de vertaler: namelijk NodeList) die overeenkomen met de gegeven CSS-selector.
• $0 - $4 is de geschiedenis van de laatste vijf DOM-elementen die u hebt geselecteerd op het tabblad Elementen, waarbij $0 de laatste zal zijn.

Om te weten meer functies consoles zijn mogelijk.

5. Meerdere cursors en selecties gebruiken

Wanneer u een bestand bewerkt, kunt u meerdere invoegtekens instellen door Ctrl (Cmd voor Mac) ingedrukt te houden en op de gewenste plek te klikken, zodat u het invoegteken op veel plaatsen tegelijk kunt instellen.

6. Logboek bewaren

Door de optie Logboek behouden op het tabblad Console in te schakelen, worden de resultaten elke keer dat de pagina wordt geladen, opgeslagen in plaats van gewist. Dit is handig als u een geschiedenis wilt bekijken van fouten die zijn opgetreden voordat u de pagina verlaat.

(Noot van de vertaler: een soortgelijke eigenschap is beschikbaar op het tabblad Netwerk. Indien ingeschakeld, wordt de zoekgeschiedenis niet langer gewist bij het schakelen tussen pagina's. Als de pagina echter is omgeleid met met behulp van JavaScript en er een andere zoekopdracht wordt uitgevoerd, is het bijna altijd onmogelijk om het resultaat van deze zoekopdracht te bekijken. Vergeet niet dergelijke eigenschappen uit te schakelen als u langdurig fouten oplost! Ontwikkelaarstools verbruiken bijna altijd meer systeembronnen dan de pagina zelf!)

7. Verkleinde bronnen gladstrijken

Hulpmiddelen Chrome-ontwikkelaar hebben een ingebouwde “mooiere” geminimaliseerde broncode in een leesbare vorm. De knop bevindt zich in de linkerbenedenhoek van de open pagina op dit moment bestand op het tabblad Bronnen.

(Noot van de vertaler: soms is het niet voldoende om deze eigenschap automatisch in te schakelen, zoals bijvoorbeeld in FireFox gebeurt)

8. Apparaatmodus

Ontwikkelaarstools omvatten een krachtige modus voor het ontwikkelen van pagina's die zijn geoptimaliseerd voor mobiele apparaten. Deze video van Google laat het meeste zien extra functies, zoals het wijzigen van de schermresolutie, het emuleren van aanraakschermaanrakingen en het emuleren van netwerkverbindingen van lage kwaliteit.

9. Emuleer apparaatsensoren

Een andere coole functie van Device Mode is de mogelijkheid om sensoren voor mobiele apparaten te simuleren, zoals aanraakschermen en versnellingsmeters. U kunt zelfs uw geografische coördinaten. Het object bevindt zich onderaan het tabblad Elementen in Emulatie -> Sensoren.

10. Kleurselectie

Wanneer u een kleur kiest in de stijleditor, kunt u op de kleurstaal klikken en er verschijnt een kleurselectievenster. Terwijl dit venster geopend is, verandert uw muisaanwijzer in een vergrootglas waarmee u kleuren op de pagina kunt kiezen, met pixelprecisie.

11. Geforceerde elementstatus

Met ontwikkelingstools kunt u dergelijke CSS-statussen simuleren element DOM zoals:hover en:focus, waardoor het gemakkelijker wordt om stijlen voor ze te schrijven. Deze functie is beschikbaar in de CSS-eigenschappeneditor.

12. Schaduw-DOM weergeven

Elementen zoals invoervelden en knoppen, browsers, worden vanuit andere gemaakt basiselementen die meestal verborgen zijn. U kunt echter naar Instellingen -> Algemeen gaan en Schaduw-DOM van gebruikersagent tonen inschakelen om deze basiselementen op het tabblad Elementen weer te geven. Dit geeft je de mogelijkheid om ze afzonderlijk te ontwerpen.

13. Selecteer volgende gebeurtenis

Als u op Ctrl + D (Cmd + D) drukt tijdens het bewerken van bestanden op het tabblad Bronnen, wordt bovendien de volgende vermelding van het huidige woord gemarkeerd, zodat u ze tegelijkertijd kunt bewerken.

14. Het kleurformaat wijzigen

MET met behulp van Shift+ Klik op het kleurstaal in het CSS-bewerkingspaneel, het kleurformaat wordt gewijzigd in RGBA, HSL hexadecimaal ( Noot van de vertaler: tegelijkertijd zowel de hexadecimale verkorte vorm als de volledige vorm, en zelfs in hoofdletters. Als dit u niet bevalt, probeert de browser deze kleur te vinden in de lijst met standaard kleurconstanten. Het enige nadeel van deze functie is dat je moet selecteren vereiste formaat(vaak moet je op alle andere mogelijke opties klikken).

15. Lokale bestanden in de werkruimte bewerken

Werkruimtes - krachtigste instrument ontwikkelaarspaneel, waarmee ontwikkelaarstools in een IDE worden omgezet. Werkgebied bevat een bestandsstructuur op het tabblad Bronnen die overeenkomt met uw lokale projectstructuur, zodat u nu direct kunt bewerken en opslaan zonder dat u wijzigingen in een externe teksteditor hoeft te kopiëren en plakken.

Om werkruimten te configureren, gaat u naar het tabblad Bronnen ( Noot van de vertaler: schakel het navigatiepaneel in als het verborgen is. Om dit te doen, klikt u op de knop Navigator weergeven in de linkerbovenhoek van het tabblad) en klikt u met de rechtermuisknop ergens in het navigatorpaneel, of sleept u eenvoudigweg het hele projecttabblad naar het ontwikkelaarspaneel. Nu zijn de geselecteerde map, de submappen en alle bestanden daarin beschikbaar voor bewerking, ongeacht op welke pagina u zich bevindt. Voor nog meer gemak kunt u de bestanden gebruiken die op deze pagina worden gebruikt, zodat u ze kunt bewerken en opslaan.

UPD. Noot van de vertaler:

De toegevoegde map is beschikbaar op alle tabbladen. Daarom, als uw project er meer dan één heeft HTML-bestand, dan is het voldoende om het op het volgende browsertabblad te openen.

U kunt meer leren over werkruimten

Het komt zo voor dat webontwikkelaars Firefox verkiezen boven andere browsers. Hun werk wordt enorm ondersteund door een aantal nuttige add-ons. In dit artikel zullen we kijken naar degenen die u naar onze mening zeker nodig zult hebben voor succesvol webprogrammeren. Daarnaast zullen we u over enkele van de meest vertellen belangrijke eigenschappen deze add-ons.

Allereerst moet u Firebug installeren.

Vuurwants

Firebug is een add-on die zeker in het arsenaal van elke webontwikkelaar zou moeten zitten. Als je niet weet waar je het kunt vinden, ga dan naar . U zult waarschijnlijk uw Firefox opnieuw moeten opstarten om Firebug te activeren.

Hierna kunt u Firebug bekijken met een van de volgende opties: volgende methoden: in het menu Gereedschap > Webontwikkelaar s > Firebug of door met de rechtermuisknop te klikken en een keuze te maken in het menu dat verschijnt "Element inspecteren met Firebug".

Er is nog een andere optie: zoek het Firebug-pictogram in Firefox, klik erop en het add-onvenster verschijnt.

Firebug lijkt sterk op de ontwikkelaarstools in Chrome. Het heeft een paneel voor het bekijken van de HTML-structuur en -stijlen, en een consolepaneel voor het bekijken van fouten, waarschuwingen en logboeken. Maar dat is nog niet alles: we hebben nog een paar tips waarvan we hopen dat u ze nuttig vindt.

De blokgrootte wijzigen

Een HTML-element is gemaakt van een CSS-boxmodel, dat op zijn beurt bestaat uit een rand, opvulling en opvulling. Het komt voor dat we deze indicatoren moeten veranderen. IN in dit geval u moet het element selecteren dat u wilt wijzigen en naar het paneel "Arrangement" gaan.

Hier vindt u een illustratie van het CSS-boxmodel, evenals de breedte- en hoogte-eigenschappen. Hoewel deze twee waarden niet zijn gespecificeerd in de CSS, dit hulpmiddel slim genoeg om ze te herkennen.

Als u ze wilt omrekenen, klikt u op de waarde en gebruikt u de pijlen omhoog (om deze te verhogen) en omlaag (om deze te verlagen).

Berekende stijlen

Je vraagt ​​je waarschijnlijk af waarom bepaalde stijlen vaak niet werken. De eenvoudigste en snelle manier De manier om hier meer over te weten te komen, vooral als u honderden stijlen heeft, is door het deelvenster Berekende stijl te verkennen. In het onderstaande voorbeeld wordt de ankertag met tekstkleur gewijzigd in class.button , die op zijn beurt wordt gewijzigd in.button.add.

Lettertypefamilie leren (de gemakkelijke manier)

Je bent waarschijnlijk veel cijferfamilies tegengekomen in de eigenschap font-family in CSS. Helaas, deze optie helpt ons niet te weten welk lettertype de browser gebruikt. Om dit probleem op te lossen, kunt u installeren Firebug-extensie genaamd .

Wanneer de installatie is voltooid, laadt u uw webpagina. Nu ziet u duidelijk welk lettertype momenteel wordt gebruikt. In ons geval wel Helvetica Neue.

Taakanalyse

Dit lijkt misschien triviaal, maar in . Een site die sneller laadt, wordt als competenter ontworpen beschouwd en scoort hoger qua inhoud. Snelheid kan dus niet worden genegeerd.

Netwerkpaneel

Het eerste dat u moet controleren om de prestaties van een website te evalueren, is het netwerkpaneel. Het registreert het HTTP-verzoek van uw website terwijl deze wordt geladen. De onderstaande schermafbeelding toont een pagina die 42 verzoeken laadt en het laden ervan duurt ongeveer 4,36 seconden.

Vervolgens kunt u HTTP-verzoeken categoriseren op type (HTML, CSS en afbeeldingen).

YSlaag!

Als alternatief kunt u , een extensie voor Firebug van Yahoo!, installeren. Na activering verschijnt het scherm extra paneel, genaamd - Yslow!.

Yslow! registreert, net als het webdashboard, uw pagina terwijl deze wordt geladen en vertelt u vervolgens waarom uw site traag is en stelt manieren voor om dit probleem op te lossen. IN in dit voorbeeld we hebben de webpagina getest en deze scoorde 86, wat een redelijke beoordeling is.

Paginasnelheid

Je kunt de plug-in ook installeren. Het test, net als Yslow!, de laadsnelheid van de site, hoewel de resultaten enigszins kunnen variëren. Het onderstaande voorbeeld laat zien hoe dezelfde pagina slechts 82 punten verdiende met Paginasnelheid.

Hulpmiddelen voor webontwikkelaars

Uiteraard zijn dit tools voor webontwikkelaars die er een aantal hebben handige opties. Vervolgens zullen we het hebben over een van degenen die we het leukst vonden.

Afbeeldingen bekijken

Het komt voor dat we informatie over een afbeelding van een webpagina moeten halen. Meestal beginnen netwerkgebruikers in de browsereigenschappen te graven of klikken ze met de rechtermuisknop op de afbeelding en selecteren ze “Bekijk afbeeldingsinformatie”:

Maar deze methode kan niet effectief worden genoemd als deze procedure moet met een aantal afbeeldingen gebeuren. In dit geval is het beter om de add-onoptie “Afbeeldingen” te gebruiken. Het is eenvoudig toegankelijk via het menu Afbeelding in de werkbalk.

Dit voorbeeld laat zien hoe we de afbeelding en de bestandsgrootte tegelijkertijd weergeven:

Ingebouwde Firefox-hulpmiddelen

In de afgelopen Firefox-versies Er zijn nog veel meer ingebouwde eigenschappen voor webontwikkelaars, waaronder:

Inspecteer element

Op het eerste gezicht lijkt het misschien dat Inspect Element uit Firefox niet verschilt van “Inspect Element in Firebug”, maar dat is niet het geval.

We zullen het niet hebben over de Inspect Element-opties, omdat deze identiek zijn aan de Firebug HTML- en CSS-panelen en alleen verschillen in lay-out en ontwerp. Het gereedschap heeft er één onderscheidend kenmerk, wat zeker het proberen waard is: 3D-weergave. Door het te gebruiken, kunt u alle details van de webpagina bekijken. Om te activeren klikt u op de knop “Firefox Native Inspect Element” in de rechter benedenhoek van de pagina. Zo ziet het 3D-voorbeeld eruit:

Hoewel ik deze nieuwe functie van Mozilla niet zo vaak gebruik als alle anderen, kan deze in sommige situaties erg nuttig zijn.

Webontwerpweergave

Vanwege de groeiende populariteit van Responsive Web Design heeft Firefox een overeenkomstige bladwijzer in zijn browser aangemaakt. Dankzij deze tool kun je evalueren verschillende parameters website zonder de grootte van het browservenster te wijzigen.

Ga naar Extra > Webontwikkelaar > Webontwerpweergave. Dit is wat je uiteindelijk zult zien:

Stijleditor

Tenslotte, als je vaak met CSS werkt, zul je deze functie zeker leuk vinden. In versies van Firefox na 11 werd de Stijleditor een ingebouwd hulpmiddel.

Deze eigenschap is niet minder waardevol dan Web Design View. Hiermee kunt u CSS bewerken, het resultaat onmiddellijk in de browser bekijken en wijzigingen opslaan die rechtstreeks worden doorgevoerd bronbestand CSS.

Style Editor is beschikbaar in het volgende menu: Extra > Webontwikkelaar > Stijleditor.

En tot slot

Firefox-add-ons hebben een groot aantal opties, en de opties waar we het vandaag over hadden, vormen slechts een klein deel daarvan.