The problem is that I have a huge Javascript code, it's broken down into many files.
And I can't seem to find where a particular javascript code is .
How would you go about finding if you were in my place?
I have the firebug lite installed but no clue how to use it. Thank you.
P.S. I'm not able to comment on SO for some reason. Sorry.
Check out this link, specifically these headlines:
Find scripts easily
Many web applications are comprised of
quite a number of files, and finding
the one you want to debug can be a
chore. Firebug's script file chooser
sorts and organizes files into very
clean list that will help you find any
file in a snap.
Go directly to line 108, do not pass go
Often times you want to jump directly
to a specific line of your script.
Doing this couldn't be easier, just
type the line number into the quick
search box, preceded by the pound
sign, as seen in the screen shot on
the right.
Find scripts: Search scripts:
I would use a text editor with a Find In Files option like Notepad++. Most IDEs would also provide this search option.
there's always: grep -r 'function myHardtoFindFunction(' src/
on a unix system or another system with GNU utilities.
you can search for function names in the firebug search box, which will also search across multiple js files
just open firebug and on the right hand side should be a searchbox. there are even check boxes for searching multiple files, case insensitivity and the use of regex if you feel ambitious.
Related
I'm using NodeJS, my package.json has express, jquery, and node-sass as dependencies, and within my code I'm only importing / requiring jQuery.
For some reason, when my index.html file is served, it has the line
<span id="warning-container"><i data-reactroot=""></i></span>
I don't see what's doing this manipulation or why. I'm inclined to believe it's something with express, bit I've yet to find any information about this online.
Any idea what adds that line, what said line is doing, and how I can get rid of it if I don't need it?
I noticed that the extension Web Of Trust is adding this exact span. WOT is a nice protection tool but when it messes up the code in the code inspector.
WOT is a good protection but as I don't want extensions messing up the HTML of the sites I'm visiting, I've removed it. And reported WOT for doing this bad thing.
Funny thing... I've noticed that when I type some word in the address bar of Chrome then I would see the Google search page plus a text above it suggesting: Did you mean to go to http://word? or something similar. That's where this extension uses it for and it's extremely annoying...
If you are using React/client library ?
React version 0.15.0-alpha.1, there's default data-reactroot attribute on root node.
Is there a plugin, or setting in Sublime Text that will enable project-level code formatting and application of the .EditorConfig plugin?
I'm wondering specifically about manual application of .editorconfig preferences re-indenting multiple, deleting trailing whitespace, converting spaces to tabs, etc., across file types. To keep it basic, I'll limit my query to HTML, CSS/LESS/SASS, and JS.
There is no tool quite like this yet. There are some tools that almost do what you want. For example my not-yet-stable EditorConfig tools, eclint (not sure how stable this is), and codepainter (which works for JavaScript only).
An EditorConfig bulk reformatter would be great. If anyone finds one I didn't mention or wants to create a better one, you could probably find some help or moral support on the EditorConfig mailing list.
Haven't used editor config before, but a quick search led me to https://github.com/sindresorhus/editorconfig-sublime. Perhaps that plugin will do what you want.
I just finished my website, which I started 2 years ago. I was always trying new things, which sometimes included adding different frameworks or other external JS files.
Now I don't know which of the linked files/lines of JS are unused. Is there a tool which can detect these files and lines of code? It would save me a lot of time.
This answer offers Google's Closure Compiler which, in the process of minifying and concatenating your JavaScript code, can remove "dead code".
Quoting from the documentation for the compilation levels:
Compilation with ADVANCED_OPTIMIZATIONS removes code that is provably unreachable. This is especially useful in combination with large libraries. If you use only a few functions from a large library file, the compiler can remove everything except those functions from its output.
Also see this answer which contains more information on Google's Closure Compiler.
I had this need so I created a tool that detects unused JS on the browser side, not just from the sources, so it can also test third parties scripts.
It works by creating a local proxy on your computer that intercepts JavaScript requests and instruments these files on-the-fly. The tool is than able to detect which parts of the instrumented files have been used by the page, and which don't.
I made it open-source and you can find it here: https://github.com/gmetais/unusedjs.
For this answer, I am not sure whether it's helpful or not. How about trying Sonar. Sonar has a javascript plugin that can check your js code quality and list the code that unused.
I've been looking at a similar task for the past few weeks myself and ended up with the following powershell query:
PS> Get-ChildItem -Path C:\PathToProject\ -Filter *.as?x -Recurse
| select-string -pattern "src=""([^""]*.js)"""
| Select -Expand Matches | Foreach { $_.Groups[1].Value } | select -unique
First it recursively selects all .aspx and .ascx files in our project directory, then finds src attribute values that refer to .js files (presumably those of script elements) and traces distinct values - voila, you have a list of .js files as referenced in your project!
It would be fairly straightforward to adjust the query so that it fits your specific project and its structure. Make sure you don't iterate over outdated files that may include obsolete references. Account for markup discreptancies - could you have used single quotes for attribute values in the past, or left unnecessary whitespace around the "equals" symbol, or both? Could you be including these files programmatically or asynchronously from inside another js files? etc. etc.
In Google Chrome Developer tools, you can now view "Coverage" on the Sources tab to display unused Javascript and CSS by percentage of each file, or even on a line by line basis.
Here's the announcement of the feature in 2017.
Though it is pretty old question, this might help for this type of problem - https://github.com/skpaul/LocateMe
I wrote this to use in my project.
I am looking for a way to search through a website for specific front-end source code: HTML, CSS and JavaScript. This is easy on a single page, but I know of no way to do it over an entire site.
It would be helpful when working for larger institutions that lack good communication. To see how things were implemented on other areas of the site, or by other front end developers (typically number in the 100s).
I don't think it is possible, but I wanted to send it up the flag pole.
wget can recursively search a website. I haven't tried, but I imagine you could pipe its output through grep or such.
Use Google Developer Console.
Once the console is open hit 'sources' tab and you can see the whole applications file tree, simply open a file up > hit the { } to unminify and simply act is if it's any other code edit 'command / control + F' to search!
Check this tut, used slightly differently here, but good way to see how to access files within console.
I've inherited an legacy project with tons of javascript files all over the place...
Is there a way to find which of those files are used inside pages?
Thanks in advance.
Use a debugging tool like YSlow!
http://developer.yahoo.com/yslow/
Such tools will usually point out redundant files and code.
You can inspect the website logs of past, say, one month, and locate all *.js files requested by browsers. The log might contain referrer page which makes things easier.
Something that I do very often for .asp files: find a good text editor that allows you to find text inside files/folders. Visual Studio .NET does an excellent job but I've tried and had success with Notepad++ too. Find all files that contain .js. If your text editor provides regular expressions support for searching (the aforementioned products do) this makes things even better. The regexp I use in VS is \.asp> (dot asp followed by a word boundary). The search results are often displayed in a window from where you can copy every thing and do some manual processing via more regex operations or copy the data to an excel file.
Macromedia Dreamweaver does an acceptable job if your website has some structure in it. There is a "Find broken links" command in Dreamweaver that generates a side report called "Orphaned files". The orphaned files report can tell you which js files are not referenced by any page. Then you can run the Dreamweaver's "Find" command (find in entire local website/find in folder) to double check each file one by one. I've tried that too. One thing to note is that Dreamweaver might not be able to detect cycles. E.g. if a file foo.js is used by bar.asp but bar.asp itself is not referenced by any other page, Dreamweaver will flag bar.asp as orphan but not foo.js. The recent version of Dreamweaver might do a better job.
You could create a script in a general purpose scripting language that runs through every html file in your project, checking their script tags. Or you could just do it manually, which may or may not save you some time depending on the size of your project.