Een gids voor webhulpmiddelen van Google

Sep 15, 2025

Procedures

Pagina 1 van 5:

HTML, CSS & AMP bekijken en wijzigen; JS

HTML, CSS & AMP bekijken en wijzigen; JS
Debugger gebruiken
Werken met apparaatmodus
Aan de slag met materiaalontwerp
Krijg grip met progressieve web-apps

Big G, AKA Google, biedt ontwikkelaars een overvloed aan tools die bedoeld zijn om webontwerp eenvoudig te maken. In dit artikel gaan we een aantal van de beste Google-tools die er zijn, en laten zien hoe u ze kunt gebruiken in uw webdesign- en ontwikkelingsworkflow.

We hebben een bereik van verschillende Webdesignhulpmiddelen Hier hebben we de inhoud opgesplitst in pagina's om het gemakkelijker te maken te navigeren. Gebruik het vervolgkeuzemenu hierboven om naar het gedeelte te springen waarin u geïnteresseerd bent. Wilt u een site ontwerpen met behulp van een andere provider? Onze gidsen web hosting en de bovenkant website bouwer heb je gedekt.

Zolang websites worden ongehinderd, kan hun inhoud door iedereen worden bekeken. Chrome's Devtools maken deze eenvoudige - op deze pagina, we laten zien hoe u HTML, CSS en JavaScript kunt bekijken en wijzigen. Aan pagina 2 , we nemen nauwere blik op het gebruik van de debugger van Google om coderingsfouten snel en gemakkelijk te herstellen. Pagina 3 Zet de schijnwerpers op de apparaatmodus van Google, die u kunt gebruiken om de mobiele versies van uw pagina's te testen via uw desktop-machine. Aan Pagina 4 We introduceren de basis die u moet bewust zijn om te beginnen met het implementeren van materiaalontwerpprincipes in uw ontwerpen. Tenslotte, Pagina 5 Kijkt naar Progressive Web Apps, het nieuwste grote ding in de webdesignector.

HTML, CSS & AMP bekijken en wijzigen; JS

Zolang de code van een website niet is gedivecteerd, kan het worden bekeken door iedereen die de ontwikkelaarstools van Chrome gebruikt. Controleer eerst de versie van Chrome - de volgende stappen werken op versie 70.0.3538.67 Draaien op een 64-bits ubuntu-werkstation. Open vervolgens het menu Hamburger en klik op Meer Tools & GT; Ontwikkelaarstools.

Launch Google's Developer Tools — Start de ontwikkelaarstools en u zou een scherm moeten zien, vergelijkbaar met dit [klik op het pictogram in de rechterbovenhoek om te vergroten]

De browser reageert door een deelvenster aan de linkerkant van uw scherm te openen. Het moet in de eerste stap worden aangepast - de browser wijst niet genoeg schermvastgoed toe. Wanneer het wordt gedaan, ziet het scherm er vergelijkbaar met die weergegeven in de bovenstaande afbeelding.

Standaard worden ontwikkelaarstools gestart met het tabblad Console geladen. Het bevat de uitgang die wordt uitgezonden door aanroepingen van de functie voor het loggen van de console. Het renderen van fouten verschijnen daar ook - als u rode lijnen vindt, is iets mis in de markup of de code van uw pagina. Een klik op de kleine 'URL' aan de rechterkant brengt u naar de lijn, waardoor het bericht verschijnt.

Inspecteer de markup

Als uw interesse zich richt op Markup, gebruikt u het tabblad Elementen weergegeven in de afbeelding. Het toont de markup de browser momenteel. Je kunt het uitbreiden en compacteren op een manier vergelijkbaar met een boomweergave - Verberg Unneeded-elementen om te voorkomen dat sensorische overbelasting.

De raison d'etre van het tabblad is het display van de CSS-structuur. Widgets 'verzamel' CSS uit verschillende bronnen, die netjes en naast elkaar worden weergegeven. In het geval van het getoonde voorbeeld in de afbeelding, zien we dat stijlen werden verstrekt van zowel de 'DIV' -tag en de markering 'Main' van de pagina.

Met Chrome kunt u de meeste attributen op de vlucht bewerken. Dubbelklik op een van de zwarte teksten om het etiket in een editor te transformeren en voer vervolgens de nieuw gewenste waarde in en druk op de retoursleutel. De renderer pakt deze veranderingen op en past ze toe aan de DOM on the Fly. Dit is vooral handig bij het optimaliseren van kleuren of plaatsingsproblemen; Een pagina opnieuw laden naar voorbeeldwijzigingen wordt vermoeiend.

Google's web tools — Een gele achtergrond geeft aan dat de inhoud van het venster is onderworpen aan filteren [klik op het pictogram in het rechtsboven om te vergroten]

Ten slotte kijk eens naar het tekstvak op de bovenkant van het deelvenster. Hiermee kunt u de getoonde Markup-items filteren: Voer bijvoorbeeld 'MDC' in om het standpunt te beperken tot alle stijlen die zijn geërfd van de materiaalontwerpbibliotheek die later in dit artikel wordt gebruikt. Wanneer een filter actief is, verschijnt een gele achtergrond op een manier die lijkt op de hierboven weergegeven.

Voer een gedetailleerde analyse uit

In moderne webbrowsers is de DOM niet beperkt tot 'statische' presentatieproblemen. Het regelt ook de gebeurtenisstroom en plaatsing. Schakel over naar het computer-tab om een lijst met 'dimensionale' eigenschappen te onthullen. Dit is ongelooflijk handig bij het regelen van widgets op het scherm op een exacte manier.

Verhuizen naar het tabblad Listeners biedt een overzicht van evenementenstromen. Gebruik deze functie om snel afwezig te zijn met problemen met betrekking tot gebruikersinteractie: als een gebeurtenis niet activeert, start dan door de verbindingen voor gebeurtenishandler te controleren.

Ten slotte laat het venster Eigenschappen een kijkje nemen naar de attributen die zijn opgeslagen in de individuele DOM-knooppunten. Als je ooit veel tijd hebt besteed aan het opzoeken van Domipulating Code, is de waarde duidelijk.

Volgende pagina: Hoe Google-debugger te gebruiken

Huidige pagina: HTML, CSS & AMP bekijken en wijzigen; JS

Volgende bladzijde Debugger gebruiken

Een gids voor webhulpmiddelen van Google

HTML, CSS & AMP bekijken en wijzigen; JS

Inspecteer de markup

Voer een gedetailleerde analyse uit

Procedures - Meest populaire artikelen

Maak je eigen stylus met slechts 4 huishoudelijke artikelen (serieus)

Hoe HTML-code sneller te schrijven

Het maken van glitch tekst en beeldeffecten in CSS

Een Alexa-vaardigheid maken voor uw site

Niveau op uw VR-kunst

Snelheid sculpt een wezen in Zbrush

Hoe een authentieke manga-strip te maken

Hoe u het juiste prototypingtool wilt kiezen

Categorieën