When I've finished debugging an issue, occasionally, one or two console.log() calls and debugger; statements go unnoticed, and end up in source control as a result, which I'd like to avoid.
Is there an inspection that would detect this, and maybe even allow setting its severity (e.g. to treat it like an error), similar to other inspections?
Settings/Preferences | Editor | Inspections
JavaScript | JavaScript validity issues
'debugger' statement
This inspection reports JavaScript 'debugger' statements, used for interaction with Javascript debuggers. Such statements should probably not be found in production code.
Unfortunately I do not know about similar inspection for console statements.
P.S.
If it would be a PHP code .. it could be done via "Php Inspections (EA Extended)" plugin where in similar by functionality inspection you can provide your own functions/classes.
To detect console.log calls, it's possible to create a Structural Search Inspection, found under Editor > Inspections > General > Structural Search Inspection. After enabling it, you need to click the + icon in the bottom half of the right side, and pick "Add Search template…".
Then, use the following settings:
Use console.log($log$); as Search template
Tick Case-sensitive
Select JavaScript as the File type
And finally, click OK, and give your new inspection a name that will be shown when it matches, e.g. "Console logging detected".
Related
I'm doing string manipulation in Java Script. My Eclipse (Luna) is handling command completion for many things, but string functions it is not.
var sillyString = "hello";
sillyString. <- command complete here: ctrl-space triggers a dropdown with nothing in it.
I have to use Google to figure out things like this: http://www.sitepoint.com/15-javascript-string-functions/
Command complete works for other Java Script items in my code base.
To configure JavaScript Content Assist options:
Go to the JavaScript Content Assist preferences page, accessed from Window | Preferences | Web | JavaScript | Editor | Content Assist.
Configure the following options, according to your preferences:
Insertion
Completion Inserts/Completion Overwrites - Select whether choosing an item from the Content Assist list will cause new code to be entered or existing code to be overwritten.
Insert single proposals automatically -If enabled, the content assist suggestion will be inserted automatically when only one content assist option exists
Insert common prefixes automatically - If enabled, Content Assist will automatically insert the common prefix of all possible completions similar to Unix shell expansion. This can be used repeatedly, even while the Content Assist window is being displayed.
Click Apply to apply your settings.
taken from this link eclipse Javascript intelisense
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
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.
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.
In our dev shop, we use client-side templates and include no HTML tags in our JavaScript code.
In our continuous integration process, we run JSHint automatically after every commit (post-build action in Jenkins) to verify compliance with our coding style guidelines.
I'd like to configure JSHint so it throws a warning when it finds an HTML tag in a .js file.
How can I accomplish this? I've searched, but I can find no examples of HTML tag warnings nor custom rules for JSHint.
Edit:
Just to be clear, I'm trying to catch code like this:
var newDiv = "<div>Hello World!</div>";
$("body").append(newDiv);
If I could get JSHint to produce a warning for the first line in the example above, that'd be fantastic.
Second Edit:
If there's post-build plugin for Jenkins that could throw a validation error if HTML is found in a .js file, then that'd also be a great alternative solution.
The Answer
No, jSHint does not support disallowing arbitrary string contents or HTML tags inside of strings. It also does not support custom rules, for now, though the author has discussed adding a public api in the future.
My speculation (as I am not an insider) on WHY
The solution you're proposing (disallowing any HTML tags in any scenario) would disallow a wide variety of highly valid use cases, regardless of how you feel about creating HTML in js. I understand that it is what your team wants to do, but such a blunt force rule is not going to have the general applicability of the rest of jsHints rules. Their focus is on enforcing style rules. Since you're disallowing all HTML tags in strings this is really more of a content validation than a style one. It would eliminate the following content examples, which are irrelevant to DOM injection/separation of concerns.
For instance:
var example="I'm writing a report on <div> tags and css";
or
var htmlStrippedText = text.replace("<div>","");
My Advice
Of course lack of broad applicability is not a reason for YOU not to do this. If you really want to filter content like this, use a command line script to search with a regex. Since you only want to see if there is HTML, not whether its valid, you can just search for stuff in the form <[div|span|body|html... as well as document.createElementand it should be fine (although you might have to be more creative if you want to allow it inside of comments). Just don't use nodejs to run your script with JS or it will fail to validate itself. :)
Of course none of this will stop a determined developer:
var topSecretDOMObject,topSecretFunction,topSecretArgument;
topSecretFunction = "create"+"Element";
topSecretArgument = "d" + "i" + "v";
topSecretDOMObject = document[topSecretFunction](topSecretArgument);
I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.
Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.
Setting a breakpoint on that line of the JS file doesn't work either, since there are lots of functions on that line.
Any suggestions?
In Chrome when you open Scripts tab you can prettify selected file by clicking on { } button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.
The debugger statement is probably what you're looking for.
Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement : debugger ; is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
a. Perform an implementation defined debugging action.
b. Let result be an implementation defined Completion value.
Else
a. Let result be (normal, empty, empty).
Return result.
The break statement is for exiting loops and switch statements and has nothing to do with debugging.
The real solution though is to not bugger your code in the first place :)
1) The error message should give you a link to the source code in the
Sources tab. Click on that link to get taken to the transpiled code.
2) Click the "{ }" icon at the bottom of the source code in the
Sources tab to format the transpiled code for easier debugging.
3)Stick a breakpoint at the line that is failing.
4) Reproduce the
problem again. This time, it should break at the breakpoint before
the error occurs.
5) Examine the local variables and call stack to
determine what exactly is going wrong.
For chrome users, you'll want to enable automatic pretty print in the experimental features.
setting your breakpoint should work now.
If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily
I have introduced ajaxy table sorting to my application, and I want to set up cucumber tests to test the functionality when javascript is supported and when javascript is not supported.
I am using capybara, so if I use the flag #javascript, it will run the test with a javascript driver. Is their a flag that will run the scenario twice once with javascript and once without?
Something like the following ...
#test-both-javascript-and-non-javascript
Scenario: Table Search
When I fill in "search" with "Jonathan"
And I press "Search"
Then I should see the following users:
| Jonathan | Smith | jonathan#example.com | active |
Using #javascript switches drivers from the default to one that can run the javascript on your pages. Leaving off #javascript does not mean you are testing "when javascript is not supported" or "without javascript support". A test of Then I should see "Javascript is not supported" on a page with <noscript>Javascript is not supported.</noscript> will fail using the default driver (i.e., no #javascript tag).
In case you really want to test with javascript not supported, you should configure a new driver with javascript disabled, and use a new tag (e.g., #nojavascript) to switch to that driver in a Before('#nojavascript') block and switch back to the default in the After('#nojavascript') block. Then you can write scenarios specifically with that tag, and repeat scenarios for cases when you want to check when javascript is disabled.
Is the behaviour really the same, regardless of whether JavaScript is enabled or disabled? If so, why are you using JavaScript at all? ;-)
I suspect that in reality the behaviour is slightly different whether JavaScript is enabled or disabled. Therefore you should have two scenarios describing the behaviour for each case, e.g. does the JavaScript version suggest results as you type?
I would not recommend enabling and disabling Javascript support on a single run.
Instead, tag the scenarios you need (or don't need, up to you) javascript and run those separate. You will probably find that you will need to repeat some scenarios to cover different behaviors, but it's worth it because you will only be repeating the feature and not the implementation.
And finally you might want to run such scenarios using different drivers as well, so you can contain your suite of tests in only "one box" as per say.