This is the third day of my participation in the First Challenge 2022

This article is translated from the official 👉DevTools. This article is an overview of DevTools. It introduces what DevTools does and lets you know that there is such a thing.

Here is the text

What is DevTools?

DevTools is a set of tools for Dart and Flutter performance and Debug.

What can developers do with DevTools?

Here are the main features of DevTools:

  • Review the UI layout and state associated with the UI
  • Diagnose a performance problem with Flutter application UI frame loss
  • CPU analysis of Flutter or Dart applications
  • Network analysis of Flutter application
  • Debug Flutter or Dart applications at the source level
  • Debug memory problems with Flutter or Dart Command line applications
  • View logs and diagnostics for running Flutter or Dart Command line applications
  • Analyze code and application size

We want developers to use their IDE and command-line development tools in conjunction with DevTools.

How do developers install DevTools?

Install and run DevTools in Android Studio

Install the Flutter plug-in

The Plugins page can be found on the Settings page of IntelliJ and Android Studio if the Flutter plugin is not installed. Then search marketplace for the Flutter plugin.

Run a Debug application

To start DevTools, run a Flutter application, for example, by clicking the Run or Debug button if the device is already connected.

Start DevTools from the Toolbar

Once the app runs, you can start DevTools in the following order:

  • Click the Open DevTools button in the Run window

  • Click the Open DevTools button in the Debug window

  • Click the Open DevTools button in the More Actions menu of the Flutter Inspector window

Open DevTools from action

Developers can also start DevTools from action. Open the Find the Action… Dialog box, Mac user Command+Shift+A shortcut key, enter Open DevTools search

DevTools is installed first, and when it is installed, a web page opens, which is the debugging tool. This opens the portal page. DevTools does not connect to the application and requires the developer to specify a port number

Install DevTools in Android Studio

In Android Studio 4.0.1, DevTools will always be in Installing DevTools.

Solutions:

  • Update the Flutter plugin first
  • Disassemble the Enable embedding DevTools on Flutter… The selected

  • Second, clear the cache

  • Finally, please send the 👉 question record

Install and run DevTools in VS Code

Install the VS Code extension

Dart Extension is required to use DevTools in VS Code. If you want to debug a Flutter application, you also need to install The Flutter Extension.

The debug application

Open the project root folder in VS Code and click Run > Start Debugging (F5).

Open DevTools

As soon as the Debug connection is established and the application is running, Dart: Open DevTools can be run in the VS Code command panel.

The first time you run it, you’ll be reminded to activate or upgrade DevTools.

Clicking the Open button activates DevTools, which then opens in the browser and automatically connects to debug.

When DevTools is activated, developers can see it in VS Code’s status bar. If developers accidentally close the Browser DevTools window, they can also restart the browser DevTools window by clicking on the VS Code status bar.

To provide feedback

Developers can try DevTools and provide feedback on usage and issues at DevTools Issue Tracker.