HTML Javascript CSS debug

debug.mk

debug dynamically created file

how to see what file and/or file path it is to actually get to that particular file and edit it. source file from which that HTML page is generated

same like questions:

https://stackoverflow.com/questions/27112163/chrome-developer-tools-dynamically-created-element

Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

Elements panel shows you the DOM view of the page, which in general case could be quite different from the actual contents of the source file (e.g. it could be all dynamic, generated with javascript).

You should look on the sources panel to view the .html .js and other resources that were used to construct this page.

Chrome dev tool

https://developers.google.com/web/tools/chrome-devtools/javascript/

https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps

debug dynamically loaded JavaScript using Google Chrome!

• fix way

1. Open Console of chrome and write the name of the method and hit enter.
   In my case, it is GetAdvancedSearchConditonRowNew
   If the JS method has loaded then it will show the definition of the method.

2. Click on the definition of the method and the whole JS file will be opened for debugging

• Another case abou dialog:

1. Open network tab in google chrome dev tools
2. Click on a control (ex. button) which loads some javascript file and calls some javascript function.
3. observe network tab and look for that JS function (in my case it is RetrieveAllTags?_=1451974716935)
4. Hover over its initiater and you'll find your dynamically loaded JS file(with prefix VM*).

---

---

1. Click on that VM* file to open.
2. Put debugger whereever you want in that file :D

---

---

• See https://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic-loading-javascript-by-some-debugger-like-webkit-fi
• Whenever you load HTML content through AJAX, and that content contains <script> tags, the script will be evaluated using eval() and recognized by Chrome's Sources view as a new file beginning with 'VM'. You can always go to the Network tab, find the AJAX request, and view the HTML response in its entirety, including your script.
• alternative

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

• I had the same issue when I was debugging my angular application. Seeing too many VM scripts which could not be blackboxed were really taking long to debug. I rather chose mozilla/IE explorer to debug.

• Check if the JS created element has a class or id applied. Perhaps this way you can search the JS files for the specific element

• If you know which element it is, two options for you:

  • Go to the Elements panel; Navigate to the parent element that the target element will eventually be added to; Right-click the parent element and click Break on... > Subtree Modifications. Now, Chrome will trigger a breakpoint when the parent element's subtree is modified, and so you can see what JavaScript code is adding the element. Unfortuantely, it won't fire that breakpoint if the element is added during the main loading of the page (e.g., during the parsing of the HTML, by script that runs immediately rather than waiting). When you hit the breakpoint , ->Sources tab, on the right-hand side find the "Call Stack".
  • If there's any text in the element that seems specific to it (content, id, class, some attribute, whatever), once the page is loaded you can use Chrome's powerful search feature to try to find that text:
    1. Open Dev Tools
    2. Go to the Sources tab
    3. Click Ctrl+Shift+F, which is "find in files" — it looks in all of the files associated with the page, not just the "current" file
    4. can even use regular expressions.

• But if you can add JavaScript to the page before any other JavaScript runs, it's actually really easy to do:

  Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
      element.setAttribute("data-original", "");
  });
  

  That marks every single element on the page with an attribute that tells you it was there when that code ran. You can see those attributes in the Elements panel of the Dev Tools. And so, if you see an element that doesn't have that attribute, you know it was added later.

  document.querySelectorAll("*") is a big hammer you probably wouldn't want to use in production code, but for temporary use when debugging/developing, it's fine.

  And if you want to know about the elements that have been created by other code later, you can do this in the console:

  Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
      if (element.getAttribute("data-original") === null) {
          console.log(element);
      }
  });
  

  That'll output every element that wasn't on the page when you ran the earlier code, and Chrome's console is really cool — you can right-click the element display in the console and choose "Reveal in Elements panel" to see exactly where that element is.

  ​

Source Maps enabled, Source Maps will show in two places:

1. In the console (the link to source should be the original file, not the generated one)

2. When stepping through code (the links in the call stack should open the original source file)

@sourceURL and displayName

this works : https://www.thecssninja.com/demo/source_mapping/compile.html

Add local source files to workspace

https://developers.google.com/web/tools/setup/setup-workflow

http://blittle.github.io/chrome-dev-tools/sources/workspaces.html

refer question microsoft/vscode-chrome-debug-core#146

Search for files or text

https://developers.google.com/web/tools/setup/setup-workflow

how-to-replace-remote-files-with-local-files-when-debugging

https://aarontgrogg.com/blog/2015/03/24/how-to-replace-remote-files-with-local-files-when-debugging/

Chrome mapping to local workspace resources tutorial.

https://eyesofablacksheep.com/2016/09/23/chrome-mapping-to-local-workspace-resources-tutorial/

walk through the current ecosystem of tools （2012） and how they can make your development experience a more enjoyable one

https://www.paulirish.com/2012/talk-tooling-the-webapp-development-stack/

Chrome dev-tools keys

open the Console

Command+Option+J (Mac)

Control+Shift+J (Windows, Linux, Chrome OS) to open the Console

open file

ctrl + p

ctrl + shift+ p

search

Ctrl+Shift+F** in source tab and search for the above function.

###add-ons

Firefox deve-tool

add-ons- FireBug

which you can get to update the CSS files on your server:

editing the

It knows the URL, and therefore can get the HTML page which is
generated by that URL. If that is what the OP wants to edit, fine. I
thought they were probably asking about editing the source file from
which that HTML page is generated, in which case there is no reliable
way to get it from the URL.

In case of wanting to open the server files related to an HTML or JavaScript output is more complicated. The user would need to be able to rebuild the server mappings. As you're already mentioning, the URL path doesn't have to correlate with the OS path, where the script lies (keyword: URL rewriting).

in getting Javascript files to open in my editor (working on a big JS app). I respect the complexities of trying to map a url to a path, that's why I thought a table of mappings would be a good middle ground - files of certain types can generally be found in similar locations.

Dafizilla ViewSourceWith

using a Firefox extension called Dafzilla ViewSourceWith, I've been able to set up a mapping that correlates the URLs with the local files. For example, when Firefox shows the URL of the current page as:
http://sanstudio.dev/test/linktest.html

That's my real master source file, not some cached copy. This is extremely useful to me, but ViewSourceWith doesn't always work with every version of Firefox.

in general, it is sometimes possible to map a Firefox-rendered page to the (static HTML) server source, using a Firefox extension called ViewSourceWith. The interface is confusing and the 'documentation' even worse, but eventually I got the mapping set up between my devel websites and both my devel and live servers. This has nothing to do with Firebug, but it doesn't seem to conflict with Firebug either. (I wish Firebug could do this on its own, so I didn't have to bother with the additional extension.)

ViewSourceWith lets me click a button in my Firefox Add-On Bar for any of my rendered pages, which then opens the actual server source of that page -- not a dupe, as in other "view source" utilities. It opens the page in BBEdit, which is my coding text editor that created those pages in the first place. This creates a good back-and-forth workflow between the browser and the editor. (Do real IDEs do something similar? I've never used one.)

I've never been able to figure out the mappings ViewSourceWith supposedly allows for JavaScript, CSS, and other stuff, just for the core HTML... but BBEdit has a popdown menu from the HTML page that opens linked code pages, so that's okay.

https://github.com/dnakov/proxly