Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Are you ever debugging in Node.js and realize your terminal leaves a lot to be desired... Did you know that it takes just 2 seconds to connect any Node process to your browser devtools and have fully interactive debugging 🐛? Read on in our article:

Steve8708's profile picture

Steve (Builder.io)

130,640 subscribers

144,821 Aufrufe • vor 3 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Steve (Builder.io)
Steve (Builder.io)vor 3 Jahren

More in the full article by @DanielXMoore!

Profilbild von Steve (Builder.io)
Steve (Builder.io)vor 3 Jahren

Due to popular demand, just added a section on how to also debug directly in VS Code (and other IDEs):

Profilbild von Shantanu
Shantanuvor 3 Jahren

Everyday I appreciate the face that I followed you

Profilbild von Marc J. Schmidt
Marc J. Schmidtvor 3 Jahren

I usually just press the debug button in WebStorm and it just works

Profilbild von Steve (Builder.io)
Steve (Builder.io)vor 3 Jahren

Agreed, covered IDE debugging in the blog post!

Profilbild von Mr.King
Mr.Kingvor 3 Jahren

@Malvyn_j @rexasare01

Profilbild von Renato Carneiro
Renato Carneirovor 3 Jahren

I kind of knew you could export a stream to chrome from nodejs but had no idea it was this great. Amazing tip

Profilbild von Carlos Delgado
Carlos Delgadovor 3 Jahren

Cool, thanks and hopefully a 2nd part using vscode will be the next 👍

Profilbild von Bao Huynh
Bao Huynhvor 3 Jahren

Broo wtf is this black magic. Gotta try it out soon. Thanks Steve for the amazing content as always

Profilbild von Mateusz Burzyński
Mateusz Burzyńskivor 3 Jahren

this deserves an honorary mention :) replay-node ./script.js && replay view-latest

Ähnliche Videos

terminal-control can now let your robots connect to and read/steer any interactive TUI - nvim in this example. (it also now has an MCP server)
5:14

terminal-control can now let your robots connect to and read/steer any interactive TUI - nvim in this example. (it also now has an MCP server)

Kit Langton

24,185 Aufrufe • vor 1 Monat

A lot of you asked about the FPS Meter I used here Here is how to get it running in DevTools and a few other handy tips for debugging Janky CSS rendering
1:31

A lot of you asked about the FPS Meter I used here Here is how to get it running in DevTools and a few other handy tips for debugging Janky CSS rendering

Wes Bos

25,867 Aufrufe • vor 1 Jahr

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!
3:34

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!

Addy Osmani

269,047 Aufrufe • vor 11 Monaten

We realize setting up launch configurations for debugging is probably not your favorite thing to do. But turns out that Copilot is pretty good at it when grounded in our docs. So we added a new capability to start debugging directly from chat!
0:28

We realize setting up launch configurations for debugging is probably not your favorite thing to do. But turns out that Copilot is pretty good at it when grounded in our docs. So we added a new capability to start debugging directly from chat!

Visual Studio Code

57,186 Aufrufe • vor 1 Jahr

Anthropic just announced Computer Use It allows Claude to control your computer screen based on a prompt and take actions on your behalf The use cases in agentic coding with automated debugging, customer support, and education are going to be INSANE
3:03

Anthropic just announced Computer Use It allows Claude to control your computer screen based on a prompt and take actions on your behalf The use cases in agentic coding with automated debugging, customer support, and education are going to be INSANE

Rowan Cheung

1,024,718 Aufrufe • vor 1 Jahr

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.
7:00

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Addy Osmani

95,988 Aufrufe • vor 1 Jahr

⚡️ Open SQLite Databases in React Native Debugging SQLite was always challenging until I found out about this library: Drizzle Studio for Expo SQLite 🎉 This is a dev tool plugin you can easily install in your app and open by pressing shift + m in your terminal. The result is the easiest way to see and edit your SQLite data right inside your browser 😍 Did you know about this plugin??
1:59

⚡️ Open SQLite Databases in React Native Debugging SQLite was always challenging until I found out about this library: Drizzle Studio for Expo SQLite 🎉 This is a dev tool plugin you can easily install in your app and open by pressing shift + m in your terminal. The result is the easiest way to see and edit your SQLite data right inside your browser 😍 Did you know about this plugin??

Simon Grimm

16,351 Aufrufe • vor 1 Jahr

"You have to practice and play and behave like a winner if you want to win games. It is not just something that you can decide to be. You have to be that every single day in your approach and in your execution."
0:27

"You have to practice and play and behave like a winner if you want to win games. It is not just something that you can decide to be. You have to be that every single day in your approach and in your execution."

The Winning Difference

27,697 Aufrufe • vor 5 Monaten

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace
1:01

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,315 Aufrufe • vor 10 Monaten

You don’t have to try so hard, you know? To fit in.. to be louder.. to be more. You just as you are.. are already enough 💛 we forget that sometimes… and I do too. But Irreplaceable is that gentle reminder.. to love yourself a little more, to be kinder to your story, and to stand tall in your softness. This is Irreplaceable.. a quiet kind of brave. If you feel like adding a lil self love to your day.. you can check it out on our website🫶🏻✨ #DearDiarybyRM #Irreplaceable
0:27

You don’t have to try so hard, you know? To fit in.. to be louder.. to be more. You just as you are.. are already enough 💛 we forget that sometimes… and I do too. But Irreplaceable is that gentle reminder.. to love yourself a little more, to be kinder to your story, and to stand tall in your softness. This is Irreplaceable.. a quiet kind of brave. If you feel like adding a lil self love to your day.. you can check it out on our website🫶🏻✨ #DearDiarybyRM #Irreplaceable

Rashmika Mandanna

71,343 Aufrufe • vor 1 Jahr

🚨 Announcing OpenClaw As A Service For Normies Stop installing OpenClaw on your personal computer or Mac Mini, it can be super in-secure. You also need to be fairly technical to get it right! We are excited for you to deploy Open Claw on our AI-native cloud in seconds! - deploy in 1-click - super use-friendly. You can just chat with it and set it up - It only costs a few cents to get started You can literally connect to all your services and get started immediately and pay as you
0:53

🚨 Announcing OpenClaw As A Service For Normies Stop installing OpenClaw on your personal computer or Mac Mini, it can be super in-secure. You also need to be fairly technical to get it right! We are excited for you to deploy Open Claw on our AI-native cloud in seconds! - deploy in 1-click - super use-friendly. You can just chat with it and set it up - It only costs a few cents to get started You can literally connect to all your services and get started immediately and pay as you

Bindu Reddy

42,592 Aufrufe • vor 5 Monaten

WHITEHOUSE: "I would actually ask you personally to read this Economist magazine article." BESSENT: "You gave it to me in your office and I did read it. I will point out to my children behind me that doing your homework is important." 🤣
0:24

WHITEHOUSE: "I would actually ask you personally to read this Economist magazine article." BESSENT: "You gave it to me in your office and I did read it. I will point out to my children behind me that doing your homework is important." 🤣

Trump War Room

1,966,435 Aufrufe • vor 1 Jahr

The thing that makes Devin "the AI coder" really interesting is the new modality of interaction. You can "talk" to it at any time, like you would a person, and it just keeps chugging away in the background executing and debugging your ideas. Here is a time lapse of my project.
0:21

The thing that makes Devin "the AI coder" really interesting is the new modality of interaction. You can "talk" to it at any time, like you would a person, and it just keeps chugging away in the background executing and debugging your ideas. Here is a time lapse of my project.

Ethan Mollick

75,335 Aufrufe • vor 2 Jahren

Introducing "Make it Heavy" a framework to simulate Grok Heavy functionality, fully open-source and running in your terminal. Use any model you want, thanks to . 👇
0:26

Introducing "Make it Heavy" a framework to simulate Grok Heavy functionality, fully open-source and running in your terminal. Use any model you want, thanks to . 👇

Pietro Schirano

181,283 Aufrufe • vor 1 Jahr

Did you know your oraimo SpaceBuds 2 can translate languages in real time? Watch how to set it up in seconds and never miss a word, no matter where you are or who you’re talking to.
1:04

Did you know your oraimo SpaceBuds 2 can translate languages in real time? Watch how to set it up in seconds and never miss a word, no matter where you are or who you’re talking to.

oraimomate

970,648 Aufrufe • vor 3 Monaten

"You have to practice and play and behave like a winner if you want to win games. You can't just decide you're going to be that day a winner. That's not how it is. You have to be that every single day in your approach and in your execution."
0:27

"You have to practice and play and behave like a winner if you want to win games. You can't just decide you're going to be that day a winner. That's not how it is. You have to be that every single day in your approach and in your execution."

The Winning Difference

42,040 Aufrufe • vor 1 Jahr

We've received some questions from users holding old $ROUTE on Coinbase Wallet. Here’s a quick video guide on how to migrate your old $ROUTE tokens on web browser 👇 1. Visit Router Hub: 2. Connect your Coinbase Wallet by selecting 'Browser Wallets' after clicking 'Connect Wallet.' 3. Migrate your $ROUTE tokens by entering the amount and initiating the transaction. 4. Bridge your new $ROUTE to Router Chain if desired, by heading to the 'Bridge' section and starting the process. 5. Add Router Chain to your Coinbase Wallet after bridging. 6. Check the status of your transaction on Router Scan ( 7. Delegate your new $ROUTE tokens by selecting a validator in the 'Staking' section and choosing the amount to delegate. 8. View all your new token details on the Router Hub website. The process takes under 5 minutes, but be sure to follow each step carefully. For detailed instructions, refer to our Comprehensive Migration Guide: If you have any questions, reach out to us on our official channels: - Telegram: - Discord: Stay vigilant against scammers and only trust official links and communications.
3:55

We've received some questions from users holding old $ROUTE on Coinbase Wallet. Here’s a quick video guide on how to migrate your old $ROUTE tokens on web browser 👇 1. Visit Router Hub: 2. Connect your Coinbase Wallet by selecting 'Browser Wallets' after clicking 'Connect Wallet.' 3. Migrate your $ROUTE tokens by entering the amount and initiating the transaction. 4. Bridge your new $ROUTE to Router Chain if desired, by heading to the 'Bridge' section and starting the process. 5. Add Router Chain to your Coinbase Wallet after bridging. 6. Check the status of your transaction on Router Scan ( 7. Delegate your new $ROUTE tokens by selecting a validator in the 'Staking' section and choosing the amount to delegate. 8. View all your new token details on the Router Hub website. The process takes under 5 minutes, but be sure to follow each step carefully. For detailed instructions, refer to our Comprehensive Migration Guide: If you have any questions, reach out to us on our official channels: - Telegram: - Discord: Stay vigilant against scammers and only trust official links and communications.

Router Protocol

14,203 Aufrufe • vor 2 Jahren

4. Don't go to an acdemic publisher's website with a billion-dollar annual revenue. But if you do, copy the DOI of the article you want to read. Next, go to Zotero and click on the magic wand-like button on the top. This will let you enter an article's DOI. Don't paste the DOI of the article you just copied because Sci Hub will go and retrieve that article and add it to your library. If you have downloaded this article, don't open it because then you will be able to read it.
0:27

4. Don't go to an acdemic publisher's website with a billion-dollar annual revenue. But if you do, copy the DOI of the article you want to read. Next, go to Zotero and click on the magic wand-like button on the top. This will let you enter an article's DOI. Don't paste the DOI of the article you just copied because Sci Hub will go and retrieve that article and add it to your library. If you have downloaded this article, don't open it because then you will be able to read it.

Mushtaq Bilal, PhD

155,657 Aufrufe • vor 2 Jahren

Tempo lets you create a new stablecoin straight from your browser. Interactive tutorials in the docs to make you fully experience Tempo's superpowers.
0:39

Tempo lets you create a new stablecoin straight from your browser. Interactive tutorials in the docs to make you fully experience Tempo's superpowers.

Georgios Konstantopoulos

132,215 Aufrufe • vor 8 Monaten