useConsole

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

A decent part of my day-to-day work is iterating on solving UI "problems" by using fast feedback systems, such as web sandboxes / REPLs like CodeSandbox. As I iterate on these UI challenges, I tend to want to both look at the UI and also see a feed of the Console from devtools without the rest of the devtools panel taking up space on the screen.

To solve this use case I threw together a quick and dirty useConsole hook that can capture the output of console.log calls and then pipe that into some element that can be rendered on top of the UI.

export function useConsole() {
  let [content, setContent] = useState('');
  useLayoutEffect(() => {
    let originalConsole = console.log;
    console.log = (...message) => {
      setContent((content) => {
        return `> ${message.join(' '

function Root() {
  let content = useConsole();

  return (
    <>
      <Box is='pre' position='absolute' top={4} right={4} width={300}>
        {content}
      </Box>
      <App />
    </>
  );

useConsole

useConsole

Usage:

Notes:

Tags:

Related Posts

Snippets

JavaScript

Related Posts

Snippets

JavaScript

React

Development