siteIcon

Tech Novice Tools

Chrome Dev Tools

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

Help

Modifying JavaScript Source Code in Desktop Chrome

Yeah, it's possible to make 'simple' temporary changes to JavaScript source code without having an IDE like Brackets.

In the movie below we show this process as we modify a TNT Library element source code: TNTSquare. Grab some popcorn and let's watch!

The steps are outlined again below, for your convenience.


Modifying Library Shapes Online:

On a desktop device, in Google Chrome (possibly other browsers if you are clever), it's possible to modify some aspects of the library shapes within the browser! No IDE required!

Take these steps:

  1. Open a page for a library graphics element you wish to investigate, like TNTDisk
  2. Open the Developer Tools Panel
  3. Click on the 'Sources' Tab
  4. In the left fly-out panel (it has to be open) open the jsgs>libraryPages area
  5. You will see a PHP source-code file of the library element, like TNTDisk.php
  6. In the scripts subfolder above it, you will find a JavaScript file with that same name, like TNTDisk.js
  7. Click on that JavaScript and find the function drawMyDesign
  8. Valid modifications you make there, (once saved) can be activated by hitting the 'Reload' button on the library page, next to the image.
  9. Those changes are not permanent; once you refresh the page, or navigate away from it, those temporary changes are lost

Last update: 02/06/20