How do I reload the page after making changes to JavaScript code on source panel of chrome dev tool - google-chrome-devtools

I was profiling bbc page and I noticed some jankiness. I got to the culprit JavaScript file and it had an observer on scroll. I made the changes. However when I reload the page all my changes are gone.
I could have used workspaces but since I do not have bbc code I can't use it.
My question is after making local changes to the file how do I tell chrome devtool to use this changed file and then reload the page so that I could do performance profiling again.

This feature is in development as a Local Overrides experiment. However, it is not yet stable (some testers reporting it simply crashes the browser) so using the experiment as it is now is not recommended. As it is, in Stable Chrome DevTools there is no functionality for this built in.

Related

moodle: Automatic plugin updates for developing offline

I am developing a plugin for moodle. Every time want to review the results of the things I have changed in the code it is necessary to update all plugins. This means I have to open a notification page and click on update. I waste a lot time by doing this. Furthermore, it requires a internet connection to check for updates online.
Is there a way to update plugins that are under development automatically?
UPDATE
Especially changes to the AMD-Files do not become updated. The following steps I have tried:
First try:
change js-file inside AMD folder
[optional] delete minified version of the js-file
run grunt (uglify)
page reload in firefox or chrome
=> no changes visible after page reload in firefox
Second try:
change js-file inside AMD folder
run grunt (uglify)
change version number at version.php
updated plugin at moodle / administration / site administration / notifications
page reload in firefox or chrome
=> changes are visible
Cache was disabled in the browser and inside moodle
You shouldn't need to do any form of update if you have just made changes to your code - make the change, save it, refresh the page.
If you have changed any language strings or CSS or created any new autoloading classes, then Purge the site caches to see the new version.
If debugging is on, you shouldn't need to purge any caches for javascript changes (but you can also set $CFG->jsrev = -1; in config.php, as that sometimes helps).
The only times (during development) when you really need to bump the version number and then visit the notifications page (which doesn't require an internet connection) is if you are adding/removing a capability, changing the database tables in some way or making changes to one of the other files in the 'db/' subfolder (e.g. caches.php, messages.php).
I changed the config.php in the root folder of moodle and added the following lines:
$CFG->cachejs = false;
$CFG->debug = DEBUG_DEVELOPER;
Finally, I saw all changes made to Javascript files stored in mod/my-plugin/amd/src directly on the page without running grunt.
It was not enough to set the debugging options under administration / site administration / development / debugging.

Chrome Devtools empty file-list

I need to inspect the website but my scripts are not listed.
I already tried to uninstalled chrome and resintalled it again.
If I pause javascript and trigger any javascript action it opens a VM-version of jquery but I need the real file, not the vm-loaded one.
Any idea?
A but or not?
Any workaround?
Following the discussion from the comments above, the issue was unrelated to the web app but the environment in which the Chrome instance was run in. It was likely a Chrome Extension or modified setting that caused this misbehaviour.
The resolution was to create a new Chrome Profile, since extensions and settings are not shared between profile instances. The next step may be to identify the particular extension or plugin at fault to avoid this happening again.

How can I re-use the same Chrome Developer Tools Window for every tab/window?

I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.

What does Ctrl-S specifically do in Chrome Dev tools Sources tab?

The local save feature of the Chrome Dev tools Sources tab is very powerful.
However, I can't completely tell what kind of changes actually hold.
What changes are actually activated?
Ctrl-S applies your changes into v8.
So the the dynamic page behavior will work differently according to the changed code.
The star symbol in the file title indicates that the recent changes in the file haven't been sent to v8.
You have to save the changed file to the place where the web server gets it if you want to see the changes after reloading the page. You could do that with help of context menu.

Waiting mouse cursor in my GWT application stays infinitely (only in Chrome, only in Production)

Could you please tell me why I have waiting mouse cursor in my gwt application as if page not fully loaded ? It doesn't happen on dev server. It only happens in production. Also it's happening in Chrome but doesn't in IE.
Link to my app is here.
Screenshot
I checked it again in Chrome, but for me no wait cursor is Displayed. But i think, your Google Chrome is trying to open the Google Translate Menu. For me it came quickly and the page loading stopped and the mouse was at normal position.
I prefer you try updating your chrome.
I have also checked the same in my co-workers Laptop and its working fine too.
If problem still persists, please use CCleaner Software and clear all Temporary files, Browser Cache, Recent files etc. Why because, GWT creates a lot of temporary files which may reduce your system performance. So after each cleaning, just restart the system also. I had few such resolutions recently.
I opened your link in Firefox and got the following error
ERROR: Possible problem with your *.gwt.xml module file. The compile
time user.agent value (safari) does not match the runtime user.agent
value (gecko1_8). Expect more errors
This is because, you have compiled your code for Webkit browsers only. If you have added a line as below in your gwt module xml file,
<define-property name="user.agent" values="ie6">
you may either remove it or you can add more browser support via this.