Skip to main content

Roam 42SmartBlock JavaScript Debugging

This is a quick walkthrough of two powerful approaches you can take to debug your JavaScript code in your Smart Blocks in Roam.

Browsers nowadays have developer tools included. 

On Chromium browsers you'll find developer tools under more tools in the browser menu or you can also use the shortcut Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). 

In Safari developer tools are under the Develop menu. If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”

In this article I assume you already have Roam42 installed. If not, you can see instructions for downloading and installing Roam42 here.

Breakpoint in 42SmartBlock code

You need to apply a small trick to be able to place a breakpoint within your javascript code you are running in your #42SmartBlock.

Load Roam into your browser window, then open Developer Tools of your browser. Click the Sources Tab. Right click the top of the sources tree and select "Search in all files...". In the search box enter the following search term:

Function(scriptToRun.toString())

You should find two instances of this in the roam42 source code. One for the <%JAVASCRIPT: %> (or <%J %> command, the other for the <%JAVASCRIPTASYNC: %> (or <%JA %>) command. Place breakpoints on these lines. For the async function place the breakpoint on the new AsyncFunction call not on the await call. 

42SmartBlock debugging

When you run your SmartBlock in Roam, the browser will break the execution of the javascript when it hits the line with the breakpoint. At this point click the "Step into next function call" button. You'll be taken into the javascript code of your 42SmartBlock. Place a breakpoint within your Smart Block to the location you want to analyze, and press "Resume script execution". The script will resume until it reaches your second breakpoint. At this time you can use developer tools to inspect values of variables, to look at the call stack, etc.

Console Log

Another debug approach is to write messages to the Console Log also accessible via Developer Tools. You do this by including the following line in your code:
console.log('message');

Your message may be any expression that resolves to a string.

Using the console log is an excellent way to monitor the operation of your Smart Block, such that you have an execution trace in the console log when something surprising happens and you need to understand why it may have happened.

Check out my related posts

Like this post?
Show your support.

Comments

  1. Do you know how to clear a script cache, or making sure only one versiĆ³n of a ```javascript``` is running?
    I have a var update = setInterval(function () { }, 500);
    So when I try to debug, I get more than one result.

    ReplyDelete
  2. I've found the same recently. somehow with a recent update Roam seems to execute roam/js scripts twice on loading. My workaround is to delare a global variable in my script and check if the variable is there. Looks like a hack, but works...

    if (typeof window.myXYZFlag === 'undefined') {
    window.myXYZFlag = true;
    var update = setInterval(function () { }, 500);
    }

    ReplyDelete

Post a Comment

Popular posts from this blog

Deep Dive Into Roam's Data Structure - Why Roam is Much More Than a Note Taking App

Which are the longest paragraphs in your graph? Which pages did you edit or create last week? How many paragraphs of text do you have in your database in total? Which pages do you have under a given namesapece (e.g. meetings/)?

Showcasing Excalidraw

Conor ( @Conaw ) pointed me to Excalidraw last week, and I was blown away by the tool and especially about the opportunities it opens up for  Roam Research ! It is a full-featured, embeddable sketching component ready for web integration. This post will showcase key Excalidraw features and discusses some of the issues I still need to solve to complete its integration into Roam. I spent most of my free time during the week integrating Excalidraw into Roam. This article will introduce Excalidraw by showcasing its features.

My GTD - How I Organize Meetings and TODOs in Roam

How efficient is your workflow for keeping on top of all your meeting notes, action items, contacts, projects and more?  If you were to bump into someone unexpectedly would you be able to remind yourself of all the relevant topics you wanted to discuss with the person?  Can you remember all the things you wanted to get done when running your errands?  Can you keep track of your discussions with all the people you talk to regularly? In this post I will walk you through my meetings-actions-people workflow in Roam. If you are new to Roam and Roam42... Just in case you are not familiar with Roam , it is an ultra flexible note taking tool. It's like the Excel for text. If you want to find out more, there is tremendous amount of quality content available on YouTube, just search from "Roam Research". Equally, you can head over to RoamBrain.com for all the best links and more. My workf

Roam-Excalidraw Plugin MVP Release

  I am releasing the MVP version of the Roam-Excalidraw Plugin. Over the past two weeks, I have been super focused on getting to this point. As a consequence, this post is going to be shorter and more utilitarian than usual. I had to make a choice whether to release the plugin this weekend or to write a detailed blog post. I opted for the first.

contact: info@zsolt.blog