How to map client-side code to Source Code

Question

Recently I learned that it's possible to show JavaScript code added to the DOM / Dev Tools Elements tab by using document.write, eval, etc. to the Source panel of Chrome Dev Tools and other browsers. This is done by adding a comment before the closing <script>:

<script>
...

//# sourceURL=filename.js
</script>

I tried to apply this but the comment is not added by the HtmlService to browser. How can the Google Apps Script client-side code be shown in the Dev Tools Sources panel?

Below is my attempt of adding sourceURL as shown above Code.gs

function doGet(e) {
  return HtmlService.createHtmlOutput()
    .append(`
  <!DOCTYPE html>
  <html>
  <head>
  <base target="_top">
  </head>
  <body>
  <form>
  <input type="text" name="something" value="default value"><br>
  <button type="submit">Submit</button>
  </form>
  <script>
  function formSubmitHandler(){
    google.script.run.doSomething(event.currentTarget)
  }
  //# sourceURL=javascript.js
  </script>
  </body>
  </html>
`)
    .setTitle('Demo')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function doSomething(formData){
  console.log(JSON.stringify(formData.something));
}

How to go about debugging JavaScript in the HtmlService in Google Scripts. Not a duplicate because the OP didn't included a MCVE, doesn't mention how the HtmlOutput was created. The most common case is to use HtmlService.createHtmlOutpuFromFile(filename) but in this case I'm using HtmlService.createHtmlOutput().append(string).
When minifying javascript, //@ sourceUrl is removed. Not a duplicate because in Google Apps Script HtmlService do not minimize the code.
https://stackoverflow.com/a/13129905/1595451. Not a duplicate because the JavaScript code is added using jQuery and in this case the code is added by using the Google Apps Script HtmlService

References

Map Preprocessed Code to Source Code

Rubén · Accepted Answer · 2022-10-14T05:53:59.610

2

Instead of adding the whole client-side code at once (using a single HtmlOutput.append ), split the code in at least two parts. The first one should include the code from the top to the first / of //# sourceURL=javascript.js, the second part should add the rest of the code. The key here is to avoid having // added at the same time (instead of using a single HtmlOutput.append use two).

function doGet(e) {
  return HtmlService.createHtmlOutput()
    .append(`
  <!DOCTYPE html>
  <html>
  <head>
  <base target="_top">
  </head>
  <body>
  <form>
  <input type="text" name="something" value="default value"><br>
  <button type="submit">Submit</button>
  </form>
  <script>
  function formSubmitHandler(){
    google.script.run.doSomething(event.currentTarget)
  }
  /`)
  .append(`/# sourceURL=javascript.js
  </script>
  </body>
  </html>
`)
    .setTitle('Demo')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function doSomething(formData){
  console.log(JSON.stringify(formData.something));
}

I also tried this in a prototype SPA using templated HTML with multiple files pulled from multiple libraries (each library has one or two sets of three .html files, index, css and js, each seat corresponds to module having at least one form and one list view. The final HtmlOutput has > 20 <stript>, all are mapped correctly to Source Code.

The JavaScript code mapped to Source Code will appear as show in the following image:

Right clicking the file name and selecting Copy link address will return something like this:

https://n-hyluq5mztdwi5brxcufwcb4wfggugjbof23qiby-0lu-script.googleusercontent.com/javascript.js

edited Oct 14 '22 at 05:53

answered Oct 13 '22 at 04:12

Rubén

34,714
9
70
166

Although I'm not sure whether I could correctly understand your current issue, about `I was not able to upload an image showing client-side JavaScript in Source Code.`, is this thread useful? https://stackoverflow.com/q/61692427 If this was not useful, I apologize. – Tanaike Oct 13 '22 at 05:12
Hi Tanaike .. the note is about uploading the image to this answer to show how the client-side code looks in Chrome Source Code – Rubén Oct 13 '22 at 05:14
Thank you for your reply. I understood it. I apologize for my poor English skill. – Tanaike Oct 13 '22 at 05:16
1

@Tanaike No need to feel sorry / apologize. Appreciate your continued support as always. – Rubén Oct 13 '22 at 05:17
1

Hi @TheDeadMan. Before going to your post, what do you think about this question and answer? Are they clear? Do you find them helpful? – Rubén Mar 26 '23 at 22:45
2

@Rubén very useful, that using this structure it works as expected – The Dead Man Mar 26 '23 at 22:53
1

How would this apply with .createHtmlOutputFromFile() ? – Nestor Villalobos Apr 14 '23 at 05:50

score 0 · Answer 2 · edited Jun 02 '23 at 01:18

In my case, I was trying to get this to work in the context of AppsScript running from a Google Sheet extension, producing a custom dialog. Unfortunately, while your hack to getting the //# sourceURL=filename.js pragma comment into the HtmlOutput worked, there was still something else downstream stripping all the comments.

So I had to work around it by returning output that was a simple script to add a script element with the generated code, plus the pragma comment, into the DOM at runtime. Even more hacky, but without this, it's impossible to debug...

How to map client-side code to Source Code

2 Answers2

Linked