I'm developing a website.
I test it in Mozilla,
When I make a change to the website javascript code, I find that the change is not reflected in the browser(I checked code in debugger of Mozilla)
I understand that it's a cache problem because when I clear cache, the things work properly.
Have I identified the issue correctly?
If yes, is there a way to get rid of Clearing Cache every time?
Open the tools (F12). Go to Preferences > Advanced Parameters > Disable cache (when dev tool is open).
This way you only disable cache in dev mode, and have no impact on other sites navigation.
You have an option to disable caching in Preferences.
Go to Preferences->Advanced -> Network and check Override automatic cache management.
Limit it to0.
Related
I'm developing a Flask app using flask-socketio, running it with socketio.run(app, debug=True), but every time I update any of the app's Javascript code and then refresh the browser, the changes do not take effect. If I update any of the Python code and then refresh, the Python changes do take effect - the only problem is with Javascript changes.
Clearing my browser's data resolves the issue, but I don't want to have to do that every time I make changes to my JS code. Is there another way?
Try ctrl-clicking (or shift-clicking) the refresh button.
What is likely happening is that the browser is "caching" your Javascript code. Clearing your browser's data clears the cache, and you get the newest updates...
In some browsers, you can avoid doing that by refreshing the page in a way that bypasses the cache. I think the shift-click trick works in Firefox, and ctrl-click is Chrome. Or, look up "bypass cache refresh [browser_name]".
If clearing cache does work, then another method (which I always use) is to keep your developer tools opened and make sure you've checked "Disable cache" in the network tab.
The "Disable cache" feature only works when developer tools is opened as I said.
A week ago i think, I started getting warning messages in my google chrome console.
Clearing cache doesn't change anything, the messages disappear only in incognito mode.
Any ideas how to get rid of these warnings ?
I had this problem with the LastPass browser extension. I proved my theory by disabling LastPass and reloading the site in question - the warnings were gone!
I really didn't want to disable the JavaScript and CSS source maps so I have made the following change below:
Pending an update from the LastPass that addresses the issue, I have temporarily fixed this by changing one of the settings in the Extension settings for LastPass.
I had this setting previously set to On all sites, which was injecting the LastPass code on all sites blindly. With this change you need to right click on the Username/Password box to enable last pass, but on the plus side there are no warnings in the console anymore.
I consider this a temporary workaround until either Google or LastPass fix the issue.
EDIT: There is also a checkbox in the settings dialogue for the Console tab itself called Selected context only. Ticking this will remove the warnings and errors from Chrome extensions. Note this setting is not persisted - you'll have to click it each time you open the Dev Tools.
I've just used Chrome Console Filter -chrome-extension. I see everything except chrome-extension output.
For me it was the McAffee Web Advisor Chrome extension - removed and messages gone :)
this worked for me:
Find the path to the extensions. Type this in chrome: chrome://version/ . Look for the profile path. this location is where the extensions are saved.
Open the location with the file explorer. In my case it was something like (AppData\Local\Google\Chrome\User Data\Default\Extensions\hdokiejnpimakedhajhdlcegeplioahd\4.51.0.1_0) The error was with the last pass plugin.
Create the missing maps. In my case it was: sourcemaps/
Note that i only created the empty maps.
All I did is disable my LastPass extension(plugin), clear browsing data, hard reload the page and it works fine.
It might be another plugin for you
You need to open settings from the debug console
Then you disable one of chrome's option (They added it recently)
Just refresh the browser and all ready
I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.
I am using Chrome Dev Tools to debug a web app I'm making. I'm curious about this "Disable cache" button in Chrome Dev Tools:
Could someone please tell me what this does?
I've noticed some problems using Offline.js and discovered if I check "Disable cache" here in Dev Tools it works okay.
But what exactly is that doing? I am using Cache Manifest in my app so it works offline, but if clicking "Disable Cache" in Chrome Dev Tools is actually just disguising a bigger problem that's not useful to me.
Essentially what I think is happening:
The image I am loading (see Offline.js - checking while online?) which Offline.js checks for to determine if the user if online or offline, that image is being cached
Hence after the first load, it always appears online
If I disable cache in Chrome Dev Tools, it works correctly because it's loading a fresh copy of the image each time.
Any words of wisdom are welcome.
The disable cache checkbox disable cache, it means every time you connect a server, you will download again the WHOLE website, even already downloaded images.
This may be used when you debug an application that have cache problem (you have cached informations & parsing them but the real data has been changed)
I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.