I am just starting out with Plunker, and I want to use Firefox or Chrome developer tools to debug javascript. It looks like the javascript files get cached the first time I open them in the debugger panel. How can I get the panel to refresh after I make changes to the javascript? (I've tried developer tools in Chrome and Firefox, and I've tried Firebug too)
in chrome:
open the developer tools
open the file you want to debug: Ctrl+O and type app.js or similar
set a breakpoint
the only tricky part is the 2nd step, since the file is in a very obscure location, fortunately Ctrl+O comes handy
Related
I'm developing a WebExtension compatible with chrome and FF, but in firefox I'm not able to see the variables or functions of the content scripts in the console.
In chrome you can change the scope of the console to see what your extension sees.
Is there a workaround in firefox to be able to debug my content scripts and execute browser functions? I can only have access to the background scripts or popup, but I need to access the content scripts context.
Thanks
You can use the developer tools for debugging content scripts. They are not visible in the "debugging UI" which is accessible by the debug button on about:debugging.
If you don't see the content scripts or your addon in the normal developer tools, reload the current tab.
I found out that the console of the debugging tools switches scopes when you set a breakpoint in the content script, otherwise you can only see the normal page scope and not the content scripts scope, and when you hit a breakpoint, you will see the scope of what the break point sees.
In chrome you can just switch the scope of the console.
I'm running Firefox 36.0.4 on Windows 7 32-bit. I've diabled all add-ons, extensions and user scripts before retesting this.
I'd like to step through JavaScript code that is served up in a <script> tag in the HTML document being produced by a Java (Tomcat) web server.
Unfortunately, when I select the HTML document under Debugger > Sources, the source of the page returns to the login page of the application - it appears that session information is not being used to request the source.
I stepped through the server-side code and found that the correct session cookie values were being sent for the real page request and some AJAX requests sent by the page. However, when I tried to load the page source in the JavaScript debugger, I found that an incorrect session cookie was being sent by the JavaScript debugger.
I can replicate this behaviour in other webapps, not just my own. For example, Stack Overflow:
Is this a configuration issue, or a bug in the Firefox Developer Tools?
I can't reproduce your problem using StackOverflow as an example, at least in Firefox Developer Edition ( currently version 38 ):
One thing that might help - try disabling the cache while the toolbox is open - this setting is in the developer tools setting panel ( click on the 'gear' icon at the top right of the toolbox ):
After reviewing canuckistani's answer, I downloaded Firefox Developer Edition. Seemingly, the problem was fixed.
Five minutes in, I became sick of being asked whether to remember passwords and having to manually clear session cookies (I prefer being able to do it by simply closing the browser) - it makes testing easier.
As per usual, I went to Options > Privacy > History to disable this behaviour, by setting the value to Never remember history.
Changing this setting requires the browser to restart. However, upon restarting, I once again saw the same erroneous behaviour - the wrong session cookie was being sent to the web application again.
The workaround here is to not use the Never remember history setting. I have filed a bug report at Mozilla.org Bugzilla.
While debugging a JavaScript program I was writing with Firebug, the Script panel stopped working and I got the following message:
I went through all menus and sub-menus I could find but didn't see a option to re-enable this feature. The console.log() command doesn't work in Firebug as well (while it does work in the built-in devtools' console).
How can I re-activate the Firebug Script panel? What may have caused this?
This may have different causes. One of them is described in issue 5646, which is related to going back and forward in the browser history.
In such cases it normally requires a browser restart to work again.
Note that Firebug up to version 1.12 is based on an old debugger API exposed by Firefox called JSD, which is unmaintained and buggy. Since version 2.0 Firebug uses a new debugger API, which fixes this problem.
Coincidentally, I just "fixed" the same problem with my Firebug.
I went through re-installs, options resets and such and nothing helped.
After some investigation it boiled down to the content of the page I was debugging.
I have a function called by jQuery when page load is finished:
<script>
$(onPageLoad);
</script>
Now, this function asks user to enter his name using prompt() function. It appeared that Firebug wouldn't activate script panel until prompt() is closed. That is not a problem when you have just one page opened since you just close the dialog and everything works. However, it is a problem when you have two same pages opened. Script panel is non-operational until you close both prompts.
I was facing this problem recently. I found that my Firebug was not getting updated because my Firefox was stuck on 29.x. Once I updated my Firefox the new Firebug got installed. It supports only Firefox 30+.
Note: I was using OSX v1.9.3.
I was having same problem, and, thanks to Roman Guralink, I figured out that the the dialogue Firefox prompts you to insert the master password was the cause. When you set a master password for all password stored, FFox usually opens a dialogue to ask it just after program started. BUT, sometimes this dialogu goes behind the main window, and you don't notice it is there.
This is an MVC 4 app using the Hot Towel SPA template. Whenever I change anything in the HTML and/or javascript the only way I can get the new code to display is to clear the browser cache. F5, cntrl-F5, shift-F5, nothing works.
I'm not normally a web dev and just learning this. I've done regular MVC before and not had this issue, maybe it has to do with where the HTML and javascript is in my project (i.e. in the /App folder) ?. I'm going nuts trying to figure this out.
I can completely delete an HTML file and run the app and it still runs as it did. Clear cache and run and I then get the update.
It's running using IIS express using Firefox, Chrome, IE...
Thanks..
In Opera and Chrome (and possibly others), you can disable caching while in 'development mode'.
While in DevTools, the 2nd option in the Settings menu is
Disable cache (while DevTools is open)
Go to your web.config file and make a change in it.Its not matter what change you make.For example type a character and then delete it and build the project and run it again.I hope it works.
I also experienced this issue and turns out it was related to caching.
If using Chrome DevTools, you can simply disable cache by navigating to the Network Tab and ticking Disable Cache
This will only disable the cache when Dev Tools is open.
ctrl+shift+F5 will do the trick! Seems like browser cache is part of the problem :)
in my case iis express not updated site, but site , created by iis Manager worked correctly?
possible solution for this problem is
set "use this 64 bit version of iis express for web sites and projects" option at visual studio
it located at options->Projects and Solutions->Web projects
I found that I had the .js file open in the Chrome Developer Tools -> Sources View.
When I closed the file there and refreshed the page the new .js file showed up as expected.
The browsers cache by default. You can turn off caching in your browser to get the changed files.
I had an issue with moved .ts & .html files on the server and had to:
stop debugging
clear the whole output/dist folder inside my ClientApp
start debugging again
Ctrl-F5 to force the cache to refresh on the browser
Simply disabling the browser's cache, or forcing the .net app to recompile, or even running ng serve had no effect.
None of the above listed methods works consistently and if one considers that different browsers are used in the task pane depending on Windows version/build used then you may have to clear the cache of a different browser in each case.
However, it seems that the real issue is not so much browser caching as it is VS deciding which files to deploy to the local IIS Express server used for testing/development. In many cases, when pressing the "Start" button, modified html and/or js files won't make it to the local deployment even if you also modify the web.config file.
The way I made this work consistently is I selected the web application project (in Solution Explorer), opened properties, clicked the "Package/Publish Web" tab and then under "Items to deploy" I selected "All files in this project".
Works fine for me!
If you just want to test locally You can try
A) Create Virtual Directory
Follow below path: Project / Properties / Web
Find Servers section
Click on Create Virtual directory
B) Follow below path: Project / Properties / Web
Find Servers section
Click on Drop down and change the selected value between Express and Local
Then Create Virtual directory
Following are some of the options that we can use to solve the problem.
ctrl + shift + r (This will do a hard refresh of your current tab)
ctrl + F5 (This will force the cache to refresh on the browser)
Stop debugging and Change the web.config file and run again
Stop debugging and clean the project, Rebuild it and run the project
In case disabling the cache and editing the web.config file does not work.
Simply close the solution and reopen it and try it. Strange, but it worked for me.
Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.