I am using a gwt based ui design framework (called GXT). In the docs for this framework, it is mentioned that running "javascript:isc.showConsole()" when the app is running, will open the developer console in browser.
However when I run this in Chrome it instead does a google search for the command- in firefox it simply does not work.
How do I execute this javascript in firefox or chrome--
javascript:isc.showConsole()
Bookmarklets cannot be executed in the location bar/omnibox any more.
You have to bookmark the javascript: link before it can be executed.
A better solution is using the built-in Developer tools, in which code can be pasted and executed in the current page:
Firefox: Ctrl Shift K - See Using the web console.
Chrome: Ctrl Shift J - See Developer tools.
In Chrome, you add a tab, open bookmarks - click Other Bookmarks, right click in the bookmarks area, click add new page - and paste the URL.
In Firefox, just manage your bookmarks, click on the folder, right click in the bookmarks section and click New Bookmark.
You have to put the command in the URL of the very SmartGWT
application that you're developing, not any blank page.
Making it become a bookmark bar is a good idea, click that bookmark
when you're opening the application will open the console for you.
Related
Please how can i attach a JavaScript file to my chrome, so as any page loads it runs the code on that page?
Does chrome save the html pages it loads somewhere on local disk c that it can be accessed?
solution 1:
As a previous user said, you can build your own extension and you can run it in chrome.
solution 2:
IF it is only a temporary task, you can click on F12 (open the DevTools) and click on Console. There you can paste your own javascript function / script that will be run in the current page.
Note this works only for the current page (where you have the console opened).
solution 3:
You might want to try and use Selenium
https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd?hl=en
You can make a chrome extension to run your script.
I know there are tools which allow us to debug our own website? How can I debug(or analyze) any website, for eg:- Amazon, Google?
Basically, I want to add print functions(in JS) and add breakpoints (in JS) in the execution of a website. How is that achievable, if at all.
We can live-debug (and play-around) CSS and HTML on the browser itself, but how to debug JS on the browser?
On Google Chrome for exemple, open the DevTools window by pressing F12 and right-click on the HTML element. Then go on Break on -> and choose subtree modifications. Your app will stop at page loading and you will be able to do step by step analysis.
I'm working on a new client's website that loads Javascript from a CDN so the Javascript is not embedded or inline with the webpage source. I would like to pause everytime getCurrentPosition() is executed in order to determine which external JS file it is contained in.
I realize I could use other tools to do a string search through the contents of the JS files but I would rather keep to Chrome's debugging tools.
Should I be trying to create a watch expression or is there another way to pin down when and where a certain JS function is fired?
You can search in all files using Chrome DevTools. Find your function and debug it:
Open DevTools (F12)
Go to sources tab
Open Search All Files by pressing ctrl + shift + f (Win) or cmd + option + f (Mac)
Search getCurrentPosition
Put a breakpoint (By clicking the line number at the left of the line)
Open Google Dev tools(F12)
Press Ctrl + p
In the opened box search for all files(JS, CSS, ...).
In the box you have 5 options:
At the first select a file for using options 2-5
Type 'filename' and select it.
Type ':linenumber' to go to specific line number(':10' go to line 10).
Type '#symbol' to go to specific symbol('#TestSymbol' go to TestSymbol symbol).
In this option, if you write #JSFunctionName or #CSSClassName then the cursor
will navigate to the JSFunctionName or the CSSClassName.
Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
Type '>googleCommand' to go to specific command('>Clear console' clear the console).
You can find all the information that you need at the webpage: https://developer.chrome.com/devtools/docs/javascript-debugging
By simply putting it (copied from the webpage)
Open a site such as the Google Closure hovercard demo page or the TodoMVC
Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app
Open the DevTools window.
If it is not already selected, select Sources.
Debugging with breakpoints
A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.
Add and remove breakpoints
In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.
Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:
With the above simple example you can actually "stop" the function getCurrentPosition() and debug it.
One way would be to replace the Geolocation.getCurrentPosition method with a wrapper function so that you can set a breakpoint inside it, and then examine the stack to see who is calling it.
If you know where in the code the method is called you can set breakpoints. This will pause the javascript execution during runtime and allow you get a stack trace.
Is there a way to debug the page with browser console or firebug to know how many times
a specific Javascript function is called while loading the page ?
As #SamGreenhalgh pointed out, in Google Chrome, you can simply open the Developer Tools ([Ctrl]+[Shift]+J), find your script in Sources tab, and add
console.count('some label');
right into the body of the function you wish to observe. This will print out
some label: {N}
into the console each time console.count is called at that point with that label (see documentation).
You can set a breakpoint on the function, reload the page, and count how many times you have to press the Continue button.
In the dev tools of most browsers (and in Firebug), you'd do that something like this:
Go to the page
Open the dev tools (via menus, or press F12 on most browsers, etc.)
Navigate to the "Source" pane (the name varies, but it's usually something like that)
Find the function in the scripts. (Chrome's dev tools have a great feature: Ctrl+Shift+F does a search through all loaded scripts.)
Click the gutter to the left of the function to set a breakpoint
Then reload and count. I'm not aware of an automated way to do it.
I am using javascript for an ascx control in my application.
I am getting some errors and want to debug the same.
I have put the debugger in my javascript and unchecked disable script debugging for internet explorer.
When my script is getting executed, I get the debugger launched, and when I attach the javascript (here it is in a separate file ), There is a message as,
There is no source code available for the current location.
What could be going wrong here.
I hope to get some tips on debugging javascript with ascx control
To debug Javacript embedded in a ascx control, you can use chrome explorer.
Here is the step.
Open the page that has the user control in it.
Press F12 on that page.
go to Sources in the "DevTools"
Find pages in the "Sources" tab
click on the page name that you are debugging.
you will see the source code in the middle pane.
your user control javascript is included in the page's source code, this is the key.
use Ctrl + F to find that javascript by the method name you want to debug
add breakpoints to that method and debug
Hope it helps.
To debug JavaScript, Hit f12 in your browser. This will open the developer tools in most browsers. (with Firefox, this assumes you've already installed firebug, which has to be installed separately as an add-on.)
Select the script tab, set your break points by clicking the margin to the left of the line of code where you want to break. If you are using IE, click "start debugging". Then perform an action on your page that will trigger your code. Happy debugging.