Wat is er nieuw in DevTools (Chrome 59)

Kayce Basken

Welkom bij een nieuwe aflevering van de release-opmerkingen van DevTools. Bekijk de onderstaande video of lees verder om te zien wat er nieuw is in Chrome DevTools in Chrome 59!

Hoogtepunten

Nieuwe functies

CSS- en JS-codedekking

Vind ongebruikte CSS- en JS-code op het nieuwe tabblad Dekking . Wanneer u een pagina laadt of uitvoert, vertelt het tabblad u hoeveel code er is gebruikt en hoeveel er is geladen. U kunt de grootte van uw pagina's verkleinen door alleen de code te verzenden die u nodig heeft.

Het tabblad Dekking

Als u op een URL klikt, wordt dat bestand weergegeven in het paneel Bronnen , met een uitsplitsing van welke regels code zijn uitgevoerd.

Een overzicht van de codedekking in het paneel Bronnen

Elke coderegel heeft een kleurcode:

  • Continu groen betekent dat de coderegel is uitgevoerd.
  • Continu rood betekent dat de actie niet is uitgevoerd.
  • Een coderegel die zowel rood als groen is, zoals regel 3 in de bovenstaande schermafbeelding, betekent dat slechts een deel van de code op die regel wordt uitgevoerd. Een ternaire expressie zoals var b = (a > 0) ? a : 0 is zowel rood als groen gekleurd.

Het tabblad Dekking openen:

  1. Open het Commandomenu .
  2. Begin met het typen van Coverage en selecteer Dekking tonen .

Schermafbeeldingen op volledige pagina

Bekijk de onderstaande video om te leren hoe je een screenshot maakt van de bovenkant van de pagina, helemaal naar beneden.

Blokkeer verzoeken

Wilt u zien hoe uw pagina zich gedraagt ​​als een bepaald script, stylesheet of andere bron niet beschikbaar is? Klik met de rechtermuisknop op het verzoek in het netwerkpaneel en selecteer Verzoek-URL blokkeren . Er verschijnt een nieuw tabblad Verzoeken blokkeren in de Lade, waarmee u geblokkeerde verzoeken kunt beheren.

Verzoek-URL blokkeren

Stap over asynchroon wachten

Tot nu toe was het lastig om door code zoals het onderstaande fragment te bladeren. Je zou midden in test() zitten, over een regel stappen, en dan zou je onderbroken worden door de setInterval() code. Wanneer u nu asynchrone code zoals test() doorloopt, stapt DevTools consistent van de eerste naar de laatste regel.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

PS wil je je foutopsporingsvaardigheden verbeteren? Bekijk deze nieuwe documenten:

Veranderingen

Uniform opdrachtmenu

Wanneer u nu het Commandomenu opent, ziet u dat uw opdracht wordt voorafgegaan door een groter dan-teken ( > ). Dit komt omdat het Command-menu is verenigd met het Open File- menu, dat Command + O (Mac) of Control + O (Windows, Linux) is.

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .

Chroom 126

Chroom 125

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59

,

Kayce Basques

Welkom bij een andere aflevering van de DevTools Release Notes. Bekijk de onderstaande video of lees verder om te zien wat er nieuw is in Chrome Devtools in Chrome 59!

Hoogtepunten

Nieuwe functies

CSS- en JS -codedekking

Zoek ongebruikte CSS en JS -code met het tabblad Nieuwe dekking . Wanneer u een pagina laadt of uitvoert, vertelt het tabblad u hoeveel code is gebruikt, versus hoeveel is geladen. U kunt de grootte van uw pagina's verminderen door alleen de code die u nodig heeft te verzenden.

Het tabblad dekking

Als u op een URL klikt, onthult dat bestand in het paneel Bronnen met een uitsplitsing van welke regels code worden uitgevoerd.

Een uitsplitsing van de codedekking in het paneel Bronnen

Elke regel code is kleurgecodeerd:

  • Solid Green betekent die lijn van code uitgevoerd.
  • Solid rood betekent dat het niet is uitgevoerd.
  • Een regel code die zowel rood als groen is, zoals regel 3 in de bovenstaande screenshot, betekent dat slechts enkele code op die regel wordt uitgevoerd. Een ternaire uitdrukking zoals var b = (a > 0) ? a : 0 is zowel rood als groen gekleurd.

Om het tabblad dekking te openen:

  1. Open het opdrachtmenu .
  2. Begin met het typen Coverage en selecteer de dekking van de dekking .

Screenshots op volledige pagina's

Bekijk de onderstaande video om te leren hoe je een screenshot vanaf de bovenkant van de pagina kunt maken, helemaal onderaan.

Blokverzoeken

Wil je zien hoe je pagina gedraagt ​​wanneer een bepaald script, stylesheet of andere bron niet beschikbaar is? Klik met de rechtermuisknop op het verzoek in het netwerkpaneel en selecteer Block Request URL . Er verschijnt een nieuw tabblad voor het blokkeren van het verzoek in de lade, waarmee u geblokkeerde verzoeken kunt beheren.

Blokverzoek URL

Stap over async wacht

Tot nu toe was het proberen door de code te stappen zoals het onderstaande fragment een hoofdpijn. Je zou midden in de test() zijn, over een regel stappen en dan wordt je onderbroken door de setInterval() -code. Wanneer u nu door de asynccode zoals test() doorloopt, stapt Devtools van de eerste naar de laatste regel met consistentie.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

PS Wil je je foutopsporingsvaardigheden verhogen? Bekijk deze nieuwachtige documenten:

Veranderingen

Unified Command Menu

Wanneer u het opdrachtmenu nu opent, merkt u op dat uw opdracht is voorgelegd met een groter dan teken ( > ). Dit komt omdat het opdrachtmenu is verenigd met het menu Open bestand , dat is opdracht + o (mac) of besturing + o (Windows, Linux).

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome Devtools -team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders dat verband houdt met Devtools.

  • Dien een suggestie of feedback aan ons via CRBUG.com .
  • Meld een probleem met DevTools met behulp van de meer optiesMeer > Help > melden een devTools -problemen in devtools.
  • Tweet op @chromedevtools .
  • Laat reacties achter op ons wat nieuw is in devtools YouTube -video's of devtools tips YouTube -video's .

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 werd geannuleerd .

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

,

Kayce Basques

Welcome to another installment of the DevTools release notes. Watch the video below or read on to see what's new in Chrome DevTools in Chrome 59!

Hoogtepunten

Nieuwe functies

CSS and JS code coverage

Find unused CSS and JS code with the new Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need.

The Coverage tab

Clicking on a URL reveals that file in the Sources panel with a breakdown of which lines of code executed.

A breakdown of code coverage in the Sources panel

Each line of code is color-coded:

  • Solid green means that line of code executed.
  • Solid red means it did not execute.
  • A line of code that is both red and green, such as line 3 in the screenshot above, means that only some code on that line executed. For example, a ternary expression like var b = (a > 0) ? a : 0 is colored both red and green.

To open the Coverage tab:

  1. Open the Command Menu .
  2. Start typing Coverage and select Show Coverage .

Full-page screenshots

Check out the video below to learn how to take a screenshot from the top of the page, all the way to the bottom.

Block requests

Want to see how your page behaves when a particular script, stylesheet, or other resource isn't available? Right-click on the request in the Network panel and select Block Request URL . A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.

Block Request URL

Step over async await

Up until now, trying to step through code like the snippet below was a headache. You'd be in the middle of test() , stepping over a line, and then you'd get interrupted by the setInterval() code. Now, when you step through async code like test() , DevTools steps from the first to last line with consistency.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

PS want to level up your debugging skills? Check out these new-ish docs:

Veranderingen

Unified Command Menu

When you open the Command Menu now, notice that your command is prepended with a greater-than character ( > ). This is because the Command Menu has been unified with the Open File menu, which is Command + O (Mac), or Control + O (Windows, Linux).

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com .
  • Report a DevTools issue using the More optionsMeer > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools .
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled .

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59