Add browser devtool inspect url copy button to dev overlay #69357

huozhi · 2024-08-27T10:22:57Z

What

Add a button to show Node.js inspector url while running Node.js inspect mode, which can let users to copy a devtool of current Node.js process (the process of Next.js server rather than the next binary process one). If you're running in the normal mode you won't see it.

Video Clip of Usage

When you're running Next.js app with Node.js inspector. The little green button will be available.
The interaction is same as the copy button of error stack. And now we group them together in the same section, where is always accessible on the right side corner.

CleanShot.2024-08-29.at.13.06.58.mp4

When it's not availble such as it's not running with Node.js --inspect or the browser is not Chrome.
It will become the button linking to the docs.

CleanShot.2024-08-29.at.13.01.57.mp4

Why

This is one way to provide better development experience for inspecting the server code. Chrome DevTool is pretty solid and it provides a lot of features such as adding debug points, revealing the source code on server side. But there's limitation of browser that it cannot directly open the DevTool with JS code, so we provide a copy button for now that users can still copy it and paste it and open it with another window

Closes NDX-246

huozhi · 2024-08-27T10:23:14Z

Add browser devtool inspect url copy button to dev overlay #69357 : 2 dependent PRs (#69369 , #69432 ) 👈
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @huozhi and the rest of your teammates on Graphite

ijjk · 2024-08-27T10:30:12Z

Tests Passed

ijjk · 2024-08-27T10:42:00Z

Stats from current PR

Default Build

General

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
buildDuration	18.4s	22.4s	⚠️ +3.9s
buildDurationCached	8.5s	7.7s	N/A
nodeModulesSize	357 MB	356 MB	N/A
nextStartRea..uration (ms)	434ms	430ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
1062.HASH.js gzip	169 B	168 B	N/A
2cd9da90-HASH.js gzip	52 kB	52 kB	N/A
5867-HASH.js gzip	42.4 kB	41.9 kB	N/A
8503-HASH.js gzip	5.26 kB	5.25 kB	N/A
framework-HASH.js gzip	56.9 kB	56.9 kB	N/A
main-app-HASH.js gzip	224 B	224 B	✓
main-HASH.js gzip	32.6 kB	32.5 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	224 B	224 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	191 B	191 B	✓
amp-HASH.js gzip	511 B	512 B	N/A
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	362 B	364 B	N/A
hooks-HASH.js gzip	392 B	392 B	✓
image-HASH.js gzip	4.39 kB	4.4 kB	N/A
index-HASH.js gzip	268 B	267 B	N/A
link-HASH.js gzip	2.81 kB	2.81 kB	N/A
routerDirect..HASH.js gzip	329 B	327 B	N/A
script-HASH.js gzip	398 B	396 B	N/A
withRouter-HASH.js gzip	325 B	324 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	882 B	882 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
_buildManifest.js gzip	748 B	748 B	✓
Overall change	748 B	748 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
index.html gzip	523 B	522 B	N/A
link.html gzip	538 B	536 B	N/A
withRouter.html gzip	519 B	518 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	178 kB	176 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
middleware-b..fest.js gzip	671 B	668 B	N/A
middleware-r..fest.js gzip	156 B	157 B	N/A
middleware.js gzip	29.9 kB	29.9 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
928-experime...dev.js gzip	322 B	322 B	✓
928.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	316 kB	314 kB	N/A
app-page-exp..prod.js gzip	125 kB	123 kB	N/A
app-page-tur..prod.js gzip	139 kB	137 kB	N/A
app-page-tur..prod.js gzip	134 kB	132 kB	N/A
app-page.run...dev.js gzip	305 kB	303 kB	N/A
app-page.run..prod.js gzip	121 kB	119 kB	N/A
app-route-ex...dev.js gzip	31.2 kB	30.8 kB	N/A
app-route-ex..prod.js gzip	21.1 kB	20.8 kB	N/A
app-route-tu..prod.js gzip	21.1 kB	20.8 kB	N/A
app-route-tu..prod.js gzip	20.9 kB	20.7 kB	N/A
app-route.ru...dev.js gzip	32.9 kB	32.5 kB	N/A
app-route.ru..prod.js gzip	20.9 kB	20.7 kB	N/A
pages-api-tu..prod.js gzip	9.62 kB	9.62 kB	✓
pages-api.ru...dev.js gzip	11.5 kB	11.5 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 kB	✓
pages-turbo...prod.js gzip	20.8 kB	20.8 kB	✓
pages.runtim...dev.js gzip	26.4 kB	26.4 kB	✓
pages.runtim..prod.js gzip	20.8 kB	20.8 kB	✓
server.runti..prod.js gzip	57.6 kB	57.6 kB	N/A
Overall change	99.2 kB	99.2 kB	✓

build cache

	vercel/next.js canary	vercel/next.js 08-23-inspect_button	Change
0.pack gzip	1.61 MB	1.56 MB	N/A
index.pack gzip	132 kB	130 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 8908: /***/ (
+    /***/ 8176: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(2111);
+          return __webpack_require__(934);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6308: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5057: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(1955)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2383)
+        __webpack_require__(7163)
       );
-      const _getimgprops = __webpack_require__(5640);
-      const _imageconfig = __webpack_require__(2758);
-      const _imageconfigcontextsharedruntime = __webpack_require__(899);
-      const _warnonce = __webpack_require__(3878);
-      const _routercontextsharedruntime = __webpack_require__(869);
+      const _getimgprops = __webpack_require__(5447);
+      const _imageconfig = __webpack_require__(1650);
+      const _imageconfigcontextsharedruntime = __webpack_require__(1953);
+      const _warnonce = __webpack_require__(5054);
+      const _routercontextsharedruntime = __webpack_require__(4445);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6501)
+        __webpack_require__(7406)
       );
-      const _usemergedref = __webpack_require__(3994);
+      const _usemergedref = __webpack_require__(3303);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 3994: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3303: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 5640: /***/ (
+    /***/ 5447: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3878);
-      const _imageblursvg = __webpack_require__(4317);
-      const _imageconfig = __webpack_require__(2758);
+      const _warnonce = __webpack_require__(5054);
+      const _imageblursvg = __webpack_require__(1731);
+      const _imageconfig = __webpack_require__(1650);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 4317: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1731: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -885,7 +885,7 @@
       /***/
     },
 
-    /***/ 8580: /***/ (
+    /***/ 9833: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -912,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(4345);
-      const _getimgprops = __webpack_require__(5640);
-      const _imagecomponent = __webpack_require__(6308);
+      const _getimgprops = __webpack_require__(5447);
+      const _imagecomponent = __webpack_require__(5057);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6501)
+        __webpack_require__(7406)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -947,7 +947,7 @@
       /***/
     },
 
-    /***/ 6501: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7406: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -982,7 +982,7 @@
       /***/
     },
 
-    /***/ 2111: /***/ (
+    /***/ 934: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -999,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5815);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7771d3a7-20240827_re_h4bgdqagqtli4q7bnw2ajnn4vm/node_modules/next/image.js
-      var next_image = __webpack_require__(1878);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7771d3a7-20240827_re_qz7eh3ruj3cscolfxbcb265hza/node_modules/next/image.js
+      var next_image = __webpack_require__(7649);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1030,12 +1030,12 @@
       /***/
     },
 
-    /***/ 1878: /***/ (
+    /***/ 7649: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(8580);
+      module.exports = __webpack_require__(9833);
 
       /***/
     },
@@ -1045,7 +1045,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(8908)
+      __webpack_exec__(8176)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 5867-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: fbf4c56

eps1lon · 2024-08-27T13:02:55Z

Do we have docs where we can explain this functionality? I suspect I need to attach a debugger to get this feature to work?

huozhi · 2024-08-27T13:46:59Z

Do we have docs where we can explain this functionality? I suspect I need to attach a debugger to get this feature to work?

Good call, I'll follow up the docs in another PR (#69369). I need to add some screenshots which requires to update sth on next-site, can be done in paralell

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

packages/next/src/client/components/react-dev-overlay/action-state.ts

packages/next/src/server/dev/hot-reloader-webpack.ts

linear · 2024-08-28T15:26:53Z

NDX-246 Add Chrome DevTool inspect button to dev overlay

packages/next/src/client/components/react-dev-overlay/internal/components/nodejs-inspector.tsx

packages/next/src/client/lib/is-chrome.ts

docs/02-app/01-building-your-application/07-configuring/16-debugging.mdx

test/development/app-dir/devtool-copy-button/devtool-copy-button.test.ts

packages/next/src/client/components/react-dev-overlay/internal/components/nodejs-inspector.tsx

packages/next/src/client/lib/is-chrome.ts

packages/next/src/client/components/react-dev-overlay/internal/components/nodejs-inspector.tsx

docs/02-app/01-building-your-application/07-configuring/16-debugging.mdx

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Aug 27, 2024

huozhi force-pushed the 08-23-inspect_button branch from 761d192 to 64842ce Compare August 27, 2024 10:57

ijjk added the tests label Aug 27, 2024

huozhi changed the title ~~inspect button~~ Add browser devtool inspect url copy button to dev overlay Aug 27, 2024

huozhi marked this pull request as ready for review August 27, 2024 12:31

huozhi requested a review from eps1lon August 27, 2024 12:31

huozhi mentioned this pull request Aug 27, 2024

docs: add section for copying devtool debugging url #69369

Merged

eps1lon reviewed Aug 28, 2024

View reviewed changes

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx Outdated Show resolved Hide resolved

eps1lon reviewed Aug 28, 2024

View reviewed changes

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx Outdated Show resolved Hide resolved

ztanner reviewed Aug 28, 2024

View reviewed changes

packages/next/src/client/components/react-dev-overlay/action-state.ts Outdated Show resolved Hide resolved

packages/next/src/server/dev/hot-reloader-webpack.ts Show resolved Hide resolved

huozhi requested review from ztanner and eps1lon August 28, 2024 15:23

ztanner approved these changes Aug 28, 2024

View reviewed changes

inspect button

14ff72b

huozhi force-pushed the 08-23-inspect_button branch from 86f7d90 to 14ff72b Compare August 28, 2024 23:25

huozhi mentioned this pull request Aug 28, 2024

stitch errors with owner stack #69432

Closed

fix prop, rm warning

b5a4c80

eps1lon requested changes Aug 29, 2024

View reviewed changes

packages/next/src/client/components/react-dev-overlay/internal/components/nodejs-inspector.tsx Outdated Show resolved Hide resolved

packages/next/src/client/lib/is-chrome.ts Outdated Show resolved Hide resolved

huozhi added 3 commits August 29, 2024 12:05

loose cond, rephrase tip

cdefbae

rephrase

d1e2224

fix lint

414dd61

huozhi requested review from unstubbable and eps1lon August 29, 2024 11:10

docs: add section for copying devtool debugging url (#69369)

3aa5e4b

ijjk added the Documentation Related to Next.js' official documentation. label Aug 29, 2024

eps1lon reviewed Aug 29, 2024

View reviewed changes

remove obsolete and inline helper

8e13f81

huozhi requested a review from eps1lon August 29, 2024 15:52

rm invalid aria role

0706b9d

eps1lon reviewed Sep 3, 2024

View reviewed changes

packages/next/src/client/components/react-dev-overlay/internal/components/nodejs-inspector.tsx Outdated Show resolved Hide resolved

eps1lon approved these changes Sep 3, 2024

View reviewed changes

huozhi commented Sep 3, 2024

View reviewed changes

packages/next/src/client/components/react-dev-overlay/internal/components/nodejs-inspector.tsx Show resolved Hide resolved

delete the outdated docs

fbf4c56

huozhi commented Sep 3, 2024

View reviewed changes

docs/02-app/01-building-your-application/07-configuring/16-debugging.mdx Show resolved Hide resolved

huozhi merged commit d7c6200 into canary Sep 3, 2024
105 of 110 checks passed

huozhi deleted the 08-23-inspect_button branch September 3, 2024 15:18

github-actions bot added the locked label Sep 18, 2024

github-actions bot locked as resolved and limited conversation to collaborators Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add browser devtool inspect url copy button to dev overlay #69357

Add browser devtool inspect url copy button to dev overlay #69357

huozhi commented Aug 27, 2024 •

edited

Loading

huozhi commented Aug 27, 2024 •

edited

Loading

ijjk commented Aug 27, 2024 •

edited

Loading

ijjk commented Aug 27, 2024 •

edited

Loading

eps1lon commented Aug 27, 2024

huozhi commented Aug 27, 2024

linear bot commented Aug 28, 2024

Add browser devtool inspect url copy button to dev overlay #69357

Add browser devtool inspect url copy button to dev overlay #69357

Conversation

huozhi commented Aug 27, 2024 • edited Loading

What

Video Clip of Usage

Why

huozhi commented Aug 27, 2024 • edited Loading

ijjk commented Aug 27, 2024 • edited Loading

Tests Passed

ijjk commented Aug 27, 2024 • edited Loading

Stats from current PR

eps1lon commented Aug 27, 2024

huozhi commented Aug 27, 2024

linear bot commented Aug 28, 2024

huozhi commented Aug 27, 2024 •

edited

Loading

huozhi commented Aug 27, 2024 •

edited

Loading

ijjk commented Aug 27, 2024 •

edited

Loading

ijjk commented Aug 27, 2024 •

edited

Loading