google-apps-scriptweb-applicationssource-maps

How to map client-side code to Source Code

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));
}

Related

References

Solution

  • 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