5 useful features in Chrome DevTools

From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files.  Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this.  How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020.  webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode.  The real hash of the content - previously only the hash of the internal structure was used in webpack.  Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file.  Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together.  See here for the complete changelog.  While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections.  Please note that these updates are subject to change based on the ever-changing world of web developers.  Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications.  To improve ESM support, the webpack team is planning to make some important updates.  Self-executing snippets One of the most interesting features of webpack is code splitting.  This feature allows you to split your code into multiple packages that you can download on demand or in parallel.  At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly.  For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module.  This can result in less code generated.  ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing.  This is very useful when using external services that offer their APIs as EcmaScript modules.  Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies.  ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports.  This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created.  Instead, each module in the modules graph will be released as a separate file.  Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created.  While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them.  SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file.  In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version.  This utility helps you debug applications even after resources have been compressed / optimized.  Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021.  They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json.  This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.).  In a later release, private imports were also supported in Node.js (similar to the export field in package.json).  For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development.  Import fields for private imports are another feature to look out for in 2021.  HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot.  This can significantly speed up development by preserving application state that would have been lost on a hard reboot.  Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools.  Webpack 5 ships with a new feature called “Module Federation”.  This feature allows you to integrate multiple assemblies together at runtime.  HMR currently only supports one assembly at a time and updates cannot move between assemblies.  The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps.  Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint.  Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him.  However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems.  An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?";  or "Easy to encode the space with the space function."  WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine."  This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance.  In the current version of webpack, WebAssembly is experimental and not enabled by default.  The default support is what the webpack team will hopefully add this year.  Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient.  Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack.  The Basics Watch the Webpack Video!  Look

From the author: If you’re an active developer on the web, chances are you use the Chrome developer tools a lot. When it comes to developing modern web applications, developer tools are absolutely essential. Browsing the Internet without DevTools is like flying an airplane without windows. We can get where we need to, but it will be much more difficult.

Before we start, if you want to follow this tutorial, make sure you have developer tools open in your browser. You can do this by pressing command + option + J on Mac and Control + Shift + J on windows. Without further ado, here are 5 awesome features of Chrome DevTools.

Debugger

I use it all the time. Often times, you are working with a large file of code and should be able to see what is happening on a particular line.

You can open the Sources panel, find the location of interest, and set a breakpoint. Try this instead of going into your code editor and putting the debugger statement in the scope you want. The debugger statement is functionally identical to a standard breakpoint.

On the next page of execution, the debugger statement will be triggered and execution will stop, allowing you to inspect variables and step through the code.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

For example, here I have a page that is part of a React application that does a search. I suspect I have a problem with the onTextChange event handler, so I add a debugger to see what happens.

5 useful features in Chrome DevTools

Debugger makes it easier to interrupt execution

I usually use the debugger statement anywhere I would use console.log (), but I find it faster and easier to work with the debugger. You agree with me?

Black box script

It can work hand in hand with a debugger. Often when debugging and stepping through code, the debugger will jump from your code to some vendor’s code. This can be annoying. Also, it is rather difficult to say that the problem is definitely not related to third-party code. To avoid this interruption, close the vendor code into a black box and the debugger will not jump to it in the future.

5 useful features in Chrome DevTools

Close the vendor code in the black box

If you decide that you no longer want or need to have the vendor code placed in the black box, simply right-click the file in the source pane and select Stop Black Box.

5 useful features in Chrome DevTools

Stop black box

You no longer need to waste time looking at the supplier code!

Event listener breakpoints

Let’s assume you are trying to debug an event related problem. Maybe you need to indicate a mouse click and you want to abort execution whenever this event occurs. You don’t have to search the source to find the handler. Let the developer tools do all the work for you.

5 useful features in Chrome DevTools

Setting an event listener breakpoint

As you can see, we can choose to listen to only the mouse click event or any mouse related event. Also, we are not limited to mouse events only. We can capture any event from any object on the page. Super helpful!

DOM breakpoints

This is another one of those developer tools features that you didn’t know about. Working with modern web applications is not like the old days when the whole world was static. Pages are very often dynamic and constantly changing. By using DOM breakpoints, you can isolate a DOM element and stop execution when that element changes.

Let’s open the Elements panel and set a breakpoint on the DOM node.

5 useful features in Chrome DevTools

Setting a DOM breakpoint to modify a subtree

We can violate several conditions if we need to. This is where we select subtree modifications. With the breakpoint set, let’s try interacting with the UI and triggering a trigger.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

5 useful features in Chrome DevTools

Calling the DOM breakpoint

When a breakpoint is triggered, DevTools goes to the Sources panel and highlights the code that modifies the DOM.

Command menu

When working in DevTools or any development environment, you must keep your hands on the keyboard. Moving your hands away from the keyboard to manipulate the mouse is inefficient and time-consuming. Decision? Command menu!

To open the command menu, after opening DevTools, press control + shift + p on windows or command + shift + p on mac.
Let’s use the command menu to switch between panels without using a mouse:

5 useful features in Chrome DevTools

Changing panels using the command menu

Next, let’s move on to the side DevTools:

5 useful features in Chrome DevTools

Changing the location of developer tools

Let’s take a screenshot for you to share with a colleague.

5 useful features in Chrome DevTools

Take a screenshot

There are many other functions built into the command menu. To see the complete list, simply open the menu and scroll through it.

5 useful features in Chrome DevTools

Lots of cool stuff in the command menu

Using the command menu may slow you down a bit at first, but it’s worth it. Take the time to study it well and you will achieve greater productivity.

And so you have 5 more awesome DevTools features.

Key points

Use a debugger statement to stop the execution of your code. Try installing it where you usually use console.log ().

To avoid interfering with the vendor code when debugging, enable a black box script for it.

Use the Event Listener Breakpoints panel to easily set and fire breakpoints for any event on the page.

Use DOM breakpoints to stop execution when the DOM element changes.

Learn to love and use the command menu. This will save you time and make you a more efficient developer.

Author: Alex ritzcovan

A source: //itnext.io

Editorial staff: Webformyself team.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

PSD to HTML

Layout of the site in HTML5 and CSS3 from scratch

Look

Leave a Reply

Your email address will not be published. Required fields are marked *