nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Een kijkje in: Internet Explorer 11 DevTools

De in de browser ontwikkelde ontwikkelaarstools van Internet Explorer (IE DevTools) ontbraken lange tijd verschillende kritieke functies voor foutopsporing, waardoor het bijna onbruikbaar werd. Dit omvat het onvermogen om elementen in verschillende toestanden te inspecteren, zoals :hover :active :hover :focus, en :visited - althans niet op een eenvoudige intuïtieve manier. Lang verhaal kort, het is moeilijk en frustrerend om te debuggen in Internet Explorer.

Maar beginnend met Internet Explorer 11 heeft de IE DevTools eindelijk een facelift gekregen in zijn bestaande functies en een paar nieuwe functionaliteiten. Laten we eens kijken naar wat het nu te bieden heeft.

Ermee beginnen

Internet Explorer 11 wordt samen met Windows 8 geleverd. Als u nog steeds Windows 7 gebruikt en IE nog niet hebt bijgewerkt, kunt u hier het installatieprogramma downloaden. Start het installatieprogramma en volg de installatie-instructies.

Nadat het is geïnstalleerd, start u Internet Explorer 11 en drukt u op de knop F12 om DevTools te starten. Zoals we hieronder hebben vermeld en gezien, heeft de nieuwe DevTools een volledig opnieuw ontworpen uiterlijk, vergeleken met eerdere versies.

Hoewel dit soort menu ook al een tijdje beschikbaar is in de andere browsers, heeft IE 11 ook het " Inspect Element " opgenomen in het snelmenu om snel de DevTools te openen.

DOM Explorer

De DOM Explorer heeft ook enkele verbeteringen ondergaan. Eerst zul je zien dat het nu "broodkruimels" onderaan heeft, wat het navigeren door de DOM-hiërarchie veel leaner maakt. Het stelt ons ook in staat om elementen binnen de DOM te verplaatsen door simpelweg te slepen en neer te zetten .

Stijlen Tab

Aan de rechterkant van het DOM Explorer-venster, vergelijkbaar met de andere browsers DevTools, vindt u het tabblad Stijlen met alle CSS-regels die op de DOM-elementen worden toegepast. Het is nu ook uitgerust met Intellisense. Dus terwijl we codes in CSS, JavaScript en HTML typen, toont het een lijst met invoersuggesties om de code te voltooien.

Het plaatst nu ook de stijlen die momenteel worden toegepast bovenaan, in plaats van begraven helemaal onderaan (wat ons dwingt om te scrollen). Dit maakt het sneller en intuïtiever debuggen van CSS.

Trace Tab

Op het tabblad Traceren kunt u onmiddellijk ontdekken welke stijlen op het element worden toegepast en welke stijlen worden genegeerd.

Als u vindt dat de weergave van uw website-styling niet wordt weergegeven zoals verwacht, is dit het tabblad dat u moet inspecteren.

Tabblad Opmaak

Verder ziet u op het tabblad Indeling ook het vakdiagram en de eigenschappen van vakvakken: breedte, hoogte opvulling, marge en randen. Dit tabblad toont niet alleen informatie statisch, we kunnen nu ook de waarden van deze eigenschappen bewerken.

Nieuwe console-API

Naast de gebruikersinterface en gebruikerservaringsaspecten heeft Internet Explorer 11 ook een aantal nieuwe Console-API's geïntroduceerd, waaronder console.time en console.timeEnd methode. U kunt deze twee methoden gebruiken om de uitvoeringstijd van JavaScript-functies of codeblokken bij te houden, bijvoorbeeld:

 console.time ( 'loop'); var index; var a = ["a", "b", "c"]; for (index = 0; index <a.length; ++ index) {console.log (a [index]); } console.timeEnd ('loop'); 

Bekijk de volledige lijst met nieuwe Console API op deze pagina.

De mobiele emulator

Met het toenemende gebruik van mobiele apparaten en websites die zijn gemaakt voor mobiele platforms, is het nu zeer redelijk om een ​​functie op te nemen in IE DevTools om het ontwikkelingsproces te ondersteunen. Bekijk de IE Mobile Emulator.

In het deelvenster Emulatie kunt u de document- en browsermodus, de weergavestand, de viewportgrootte en Geolocation configureren, waarmee u uw huidige locatiecoördinaten kunt overschrijven.

Het werkt hetzelfde als de emulatietool in Chrome DevTools, dus bekijk ons ​​vorige artikel over 5 (Meer) nuttige Chrome DevTools Tips voor ontwikkelaars.

Laatste gedachte

Al met al ben ik blij dat Microsoft eindelijk serieus aandacht heeft gekregen in Internet Explorer. Afgezien van de mogelijkheid om een ​​aantal geavanceerde CSS3- en HTML5-specificaties weer te geven, worden de DevTools in Internet Explorer 11, zoals we hierboven kunnen zien, op sommige gebieden aanzienlijk verbeterd.

Echter, in termen van functies, is het nog steeds achter de andere browsers. De optie voor het bekijken van elementen in een andere staat zoals vermeld aan het begin van het bericht ontbreekt nog steeds . Voor diegenen die veel met CSS werken, zoals ik, is deze functie essentieel.

20+ Gratis E-commerce Icon Sets om te downloaden

20+ Gratis E-commerce Icon Sets om te downloaden

Bent u op zoek naar winkeliconen voor uw online bedrijf? Je bent op de juiste plek. We hebben hier meer dan 20 pictogrammen verzameld die alle noodzakelijke pictogrammen omvatten die u waarschijnlijk zou vinden en die u daarom bij een e-Commerce store zou moeten hebben.Dit kan pictogrammen zijn voor het winkelwagentje, artikelprijs, rekenmachine, afrekenen, bezorgvoorkeur, betaalmethode (creditcard of cryptocurrency), etc

(Technische en ontwerptips)

18 Essentiële plug-ins om meer uit sublieme tekst te halen

18 Essentiële plug-ins om meer uit sublieme tekst te halen

Hoewel SublimeText wordt geleverd met een heleboel geweldige functies die ons helpen als webontwikkelaars te werken, zoals bij elke andere tool, is er altijd ruimte voor verbeteringen . Dit is wanneer plug-ins echt nuttig kunnen zijn (en we zijn grote fans van plug-ins).Voordat we verdergaan, wil je misschien onze vorige berichten op SublimeText bekijken om te zien wat het in zijn oorspronkelijke staat kan doen:Eenvoudig kleurenpikken in sublieme tekstBeheer notities en lijsten met sublieme tekstHoe Sass compileren met sublieme tekstHoe veranderingen in de browser kunnen worden vernieuwd met su

(Technische en ontwerptips)