rstudio / htmltools

Tools for HTML generation and output
https://rstudio.github.io/htmltools/
215 stars 68 forks source link

Support htmlDependency of script to be added as real <script> in the DOM #312

Closed jcubic closed 2 years ago

jcubic commented 2 years ago

So I have this code:

getDependencies <- function() {
  htmltools::htmlDependency(
    name = "ggtips",
    package = "ggtips",
    version = packageVersion("ggtips"),
    src = "ggtips",
    script = c("ggtips.js", "jquery.resize.js"),
    stylesheet = "ggtips.css"
  )
}

in Roche/ggtips. The problem is that it's really hard to debug the package JavaScript code because it seems that the script is loaded with jQuery getScript and eval instead of just script tag (I didn't look at the code, sorry, but this is how it looks like). That's why there are no script files in sources in dev tools and a lot of debugging tools for JavaScript can't be done. I have a jQuery plugin in this repo called $.fn.ggtips and the only way to see the code in the developer tool is to inspect that variable in the console.

Because of this, the htmlDependency is really criplet, and in most cases, it's really hard to use something that uses this tool.

Is there a way to make script files, real script tags so you can see those files in dev tools? If not is it possible to add this as a feature?

jcubic commented 2 years ago

I just inspected the DOM and there are:

<link rel="stylesheet" type="text/css" href="ggtips-0.8.2/ggtips.css">
<script src="ggtips-0.8.2/ggtips.js"></script>
<script src="ggtips-0.8.2/jquery.resize.js"></script>

Do you know why in Chrome Dev tools the files are missing? Bus CSS is loaded? I will ask this somewhere, since this is more of a question than a bug report.

jcubic commented 2 years ago

Ok, I found that in order to have the file in the source tab you can use:

//# sourceURL=ggtips.js

as first-line in your Script file.

Found on SO: Can't see dynamically loaded code in Chrome Developer Tools 22.

The file appears in the source tab of dev tools as (no domain).

Google Chrome Devtools interface

This can be added to the documentation or as FAQ.