tracking a javascript found in pagesource

Question

ive tried everything i cud to figure this out, but i cannot track a piece of javascript in a webpage

so, just to give you some context even though my problem is not related to just this scenario. it depends on a much bigger spectrum.

Anyway, im developing on sugarCRM and im trying to edit the default onclick behavior of a slot in calendar module (you dont need to understand this to help me, so please keep reading). when i click on a slot, a modal dialog window opens that lets me log a meeting or a call.

So i tracked down the javascript behind this. ive used firebug and chrome, and they both give a list of all the JS files that are being used on a given webpage for example i search for "SUGAR.collection" and firebug tells me its located in a file named "sugar_field_grp.js?v=FVh1Z-v5nA6bYov7-aFFqQ" i can see this piece of code resides in sugar_field_grp.js, but the code im trying to change resides in "index.php?module=Calendar&action=index&parentTab=Activities", firebug actually tells me this is the file that has the javascript i want to change.

I can also right click view page source and i can see that piece of code inside the script tag. so considering this piece of code doesnt reside in a JS file, i cannot change it, its generated at runtime (i think) but there must be some source, there must be a file thats telling sugarCRM to generate this code

tl;dr how to track down a piece of javascript code that resides on pagesource and theres no JS file specified by firebug or chrome save for index.php (this file doesnt have that javascript either)

i know its been a long post thanks for reading

Answer 1

To track down specific code using Chrome / Webkit go through the following two steps:

Client:

1. Search all static text sources

• Open the Dev Panel using CTRL + SHIFT + I
• Hit CTRL + SHIFT + F for a global search dialog to pop up
• Right next to it you can set pretty printing of the JS code to on: button { }
• Enter your search term or terms using regular expressions

• Optional: Decide if you need a case insensitive search which has a greater searchspace and takes longer Example:

  

2. Search the dynamic user-DOM contents

• Go to the Tab 'Elements' hit CTRL + F.
• Enter your search term (This will also search iframes, svg's etc... within the parent DOM)

3. Recommended:

• Cross-reference the results of step 1. and step 2.
• If a given string is present in both the DOM and the static sources, then you can assume that the content is not programmatically created on the client-side.

Server:

• Many projects perform a media bundling step prior to content-delivery. They pack web-resources into the main file (e.g. index.php) to save HTTP roundtrips.
  Use sourcemaps / and or search the entire codebase for a salient static string or a salient keyword near the static string to locate the original source files.

  Searching files:

  Locally, I generally use the rapid index, and heuristic search of JetBrain's IDE's (IDEA, PHPStorm,...) and Sublime. The grep-command tool can definitely not compete here in terms of performance. On Windows I additionally use Totalcommander and its archive/regex finding abilities.

  When quickly looking up code on the server you may use something like:

  grep -r -C10 --color=always 'keyword1|keyword2' htdocs/ | less -R

  which will also provide you with line-context. two caveats: you may want to filter out binaries first and symlinks outside the scope will be ignored.

Answer 2

Learn how to search for strings in files on disk on your machine.

On Linux, MacOS and most unixen the go-to tool for this is grep. This applies to any programming language you work with. For your case simply cd into the directory of your source code and do:

grep -r SUGAR.collection .

If you're using git as your source control tool then git grep is much faster.

On Windows there are various GUI tools you can use to search for text in files. Just google: grep for windows.

If you're using an IDE then just your IDE's find-in-files functionality.