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
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
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