I have an electron app.
It uses Bootstrap v4, Electron v2 amongst some other node modules.
I have a button which opens an electron dialog, the user selects a folder, and at this point, my application BrowserWindow appears to refresh.
I don't want this refresh to occur. I have created a test case which shows this behaviour. No doubt I have made a simple error, please can take a look at this repo to show the test case which reproduces my problem.
https://bitbucket.org/renegadeandy/electron-dialog-problem/src/master/
The problem was I am writing a log.txt file to the directory which is being watched by the electron-reload module.
When I write a new record to the log, the file changes, and causes my application to reload! Makes sense - but the combination of my logging & active reload isn't working nicely together.
I have solved it by simply removing electron-reload.
Related
Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?
This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.
Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.
But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.
Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools
"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types
How it works:
You specify a directory where DevTools should save changes. When you
make changes in DevTools, DevTools saves a copy of the modified file
to your directory.
When you reload the page, DevTools serves the
local, modified file, rather than the network resource.
To set up Local Overrides:
Open the Sources panel.
Open the Overrides tab.
Click Setup Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes."
UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides
The Resource Override extension allows you to do exactly that:
create a file rule for the url you want to replace
edit the js/css/etc in the extension
reload as often as you want :)
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler
(pretty sure some of the web devs already know about this tool)
Save the file locally
Edit as required
Profit!
Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)
Yes you can eazily!
Source -> filesystem -> choose the conatainer folder -> allow access -> open your file, edit and save.
https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/
In my electron app menu I am using the built-in zoomin/zoomout roles. (The menu code being used is pasted in at the end of this question.) I start the app, choose zoom-in, then close the app. When I start it again, it starts at that already zoomed in setting.
Where is it saving this configuration? There is no hidden file being created or modified in the application directory, or below. I wondered if it might be something about my development environment, so I built the Linux package, and ran that, but the behaviour is the same.
Another question I've had is where the Chrome debugger saves the breakpoints (and other debug configuration) between runs of my electron app, and now I'm wondering if the zoom setting is also a Chrome thing? However, I've checked and it appears to be saving these settings per-application: if I set the zoom in the development environment, it has not affected the zoom when I start the packaged version.
(To be clear, this is not a bug I'm trying to fix - in fact I'd class it as a feature - but I would like to understand what setting files my Electron app is reading/writing, beyond the ones I am explicitly creating.)
{
label: 'View',
submenu: [
{role:'resetzoom'},
{role:'zoomin'},
{role:'zoomout'},
{type:'separator'},
{role:'togglefullscreen'},
]
}
I'm creating an html5 banner using Google Web Designer. I've created the banner and published it. When I view the published version I noticed that it takes sometime to load.
Someone else on my team is also creating HTML5 banners. The banner that he creates loads instantly even though its a larger file size. We compared our files and other than the actual assets, the way the banner was created and published is the same.
Does anyone have any ideas why this might be happening?
GWD add this code at the end of the banner and animation show up immediately:
<script data-exports-type="dclk-quick-preview">studio.Enabler.setRushSimulatedLocalEvents(true);</script>
Which environment are you using?
When creating a new project in GWD you are able to select an environment. By default is DoubleClick.
This adds additional file (in the case of DoubleClick, the Enabler library).
If you open your Chrome console, while running the banner, you will see that the banner is not initialized until the enabler is available.
You will also see how much time it takes to load the enabler.
If your colleague is creating a banner without that library, or without correctly listening to the event Enabler.initialized, this may be the main reason for the discrepancy.
If you don't want to include this additional library (that is used to integrate your banner in DoubleClick Studio), just select Generic from the environments dropdown.
There is also another reason that may cause the delay, and is the PoliteLoader.
You can select to politeLoad the banner from the Publish menu.
If the PoliteLoader is selected this cause the banner to be initialized only after the page is fully loaded. This may cause delays compared to a non polite loaded ads.
This all seems not to be a bug, but a feature of enabler.js simulates a test environment, when not beeing uploaded to Adwords (guess it similar in Doubleclick). Uploading to Google Environments should change the situation
Look at the console and see:
There is a long delay in alle items loading after the enabler.js.
It is NOT because of a long loading time of enabler.js - thats all fine.
Looking at the Logs, the enabler waits a second and throws out:
[ 1.008s] [studio.sdk] Using default ad parameters in test environment. Simulating local events.
When uploading to Google Adwords (i assume that this all is similar to DC Studio) - the enabler throws out different logs and the delay disappears.
Hope this was helpful.
By chance, I found out a way to make the Enabler loading fast. Instead of using Publish, use Preview to generate the HTML.
For some reasons, Enabler.js in preview-generated HTML only takes 0.019s to load as compared to Enabler.js in publish-generated HTML taking 1.015s to load.
Studio Enabler SDK looks for "e" parameter in iframe URL containing Studio creative. It expects a number and uses that to set the creative environment.
Setting e=1 in your preview environment (query string parameter in the iframe url pointing at the index.html for your studio creative) will tell Enabler to use LIVE mode.
I assume there is a reason why Enabler has this functionality (avoid counting impressions or paying for impressions from test/qa environment)...so I wouldn't suggest using this as a permanent setting.
I am a total newbie to google-apps-script, but I can't believe the problem I'm having. I can't even get the Hello World! example to work as a web-app.
I have copied and pasted code from google's documentation website, and I still can't get it to work. (I tried more complicated stuff first, but then I started trying simpler and simpler code until I bottomed out with the below problem.)
When I publish the following code as a web-app:
function doGet() {
return ContentService.createTextOutput('Hello, world!');
}
Instead of seeing "Hello, world!" in the browser, I get the following error message:
The script completed but did not return anything.
I'm really at a loss here. I don't know how to try anything simpler, and again, the code snippet above was copied and pasted directly from the Content Service documentation page (https://developers.google.com/apps-script/reference/content/).
Any help with this problem is greatly appreciated.
Thanks in advance.
Thanks for the response Alan.
I created a new project and pasted the Hello world code into it, and it worked. I'll just work from this new project going forward.
...
Now that I have a few more minutes of experience, I think my problem was with version control. I thought that when I made a change in my code and updated the current version, then the current version published as a web app would reflect this change in my code. However, it seems that you have to create a new version of your code in order for your newly-published web-app to reflect the most recent changes in your code. My problem was that I was not creating new versions as I changed my code, so I kept accessing the old code which was always the same as when that version was first created.
(Using the Test web app for your latest code link (located in the Deploy as web app dialog which is accessed from the Publish menu) did reflect my most recent changes, but this was not adequate for my testing purposes since I was sending arguments to my web app url. (The latest code link only calls your web app with a read-only version of your web app url that has no arguments appended to it.) In order to properly test the web app with all arguments appended to the url, I needed to re-publish the new code under a different version number in order for those changes to be reflected in the web app that was published. Only then I could access this url that pointed to my latest code with all of my arguments appended.)
Again, just hitting the Update button in the Deploy as Web App dialog without specifying a new version does not actually update the current version with your new code. In order for your latest/newest code to be deployed you have to create a new version of your code that will reflect your latest changes. In order to create a new version, you first have to choose Manage versions... from the File menu and then save a new version that reflects your most recent code changes by hitting the Save New Version button. Once you have done this, you can choose to publish this new version in the Deploy as Web App dialog. The url for your web app will then access whichever version of your code that you last deployed/published.
I know that everyone on here probably already knows this, but I thought I'd clarify what my problem was (problem understanding the work-flow of the code-publish cycle) in case any newbie in the future also runs into this problem.
<<<<<UPDATE>>>>>
See the answer from Serge below about how to use the dev version of your web app url with parameters appended to it. In many cases, this can alleviate the need to create new (exec) versions of your web app as I described above if/when you are making only incremental changes to your code.
In order to get hold of your dev url in the browser address bar so you can copy it for further use (instead of getting the script.googleusercontent.com... url that is used to temporarily serve the content/output of your web app) just call an undefined function in your web app code. Then use the Test web app for your latest code link to call the dev version of your web app. This will cause an error page to be returned, and your dev url will then be available for copying in the browser address bar.
Following these steps I was able to get the Hello World Script to run:
Go to script.google.com
Paste your above code into the script area.
Save as Hello World.
Publish as version 1.0.
Go to the url it generates and "Hello, world!" is now displayed.
You can now also test the web app with the latest code when publishing.
Your statement that the .dev url is not able to support parameters is not exactly true (The latest code link only calls your web app with a read-only version of your web app url that has no arguments appended to it). Actually it does just like the exec one but you can only call this url directly from the browser (and not from another app) because only you can access the app using this special url.
demo code :
function doGet(e) {
var valToReturn = ContentService.createTextOutput('the parameter was '+e.parameter.val).setMimeType(ContentService.MimeType.TEXT);
return valToReturn;
}
The test .dev url with parameters goes like this :
https://script.google.com/macros/s/AKfycb___vWxs/dev?val='test'
and the return you get in your Browser is :
In the google chrome version 30.0.1599.101 m I am not able to save the changed js file.
On saving the js file I got yellow triangle symbol with "change to this file were not saved to file system" message.
I know this used to work in older version
I am using windows-7 64 bit
Click on the cog in the developer tools window (lower right corner)
Go to workspace and add the directory which you would be working on.
This is to accidentally prevent you from modifying files that you did not intend on changing.
Happened to me too. After picking the workspace directory, I also mapped the file from the "Source" panel of Devtools to its filesystem equivalent (using right-click on the file, from the file tree). It solved my problem.
In chrome > 63, accepted answer option is disabled.
In later should be done through workspaces.
Tonight, I accidentally managed to fix this problem, just open the file on the disk and save it with a simple change even with a space.
Refresh the page in Chrome, Chrome will link it(The file) to the disk.
Using Ctrl + F5 to clear the browser cache worked for me.
I found nothing in "workspace" that seemed relevant, and other things people listed didn't help either. What helped was to go in dev tools, where it says Pages, Sources etc., there is also Overrides (duh :)), I chose it, it said "Select folder for overrides", I did, and then also clicked "Allow" on Chrome asking for confirmation. That's it, after that I was able to save the files, the overrides worked.
Ok, my case might be a bit different but I will share my experience on what I was facing that caused to this warning and how I solved it.
I was trying to check a certain strange behavior on a React app for video streaming, so I opened up Developer console, enabled local overrides and tried editing the js file, immediately upon saving I got the warning “Changes to this file were not saved to file system”.
Note the message at bottom right “Source mapped from app.bundle.min.js”, this indicated that this is not an actual file but a mapping from the app.bundle.js (Webpack bundle)
So I moved to editing the app.bundle.min.js, I searched the appropriate string I was interested in from the mapped file (react-dom.production.min.js) and searched it in app.bundle.min.js
Again I got the same warning but I noticed the “app.bundle.min.js” file was fetched using a url parameter ?v=4900, I decided to remove it to check if that was the culprit causing the issue, to achieve that I modified the index.html file and edited the script tag that was fetching the js file from
<script src="libs/app.bundle.min.js?v=4900"></script> to <script src="libs/app.bundle.min.js"></script>
After that I forced refresh the page (Shift+F5, normal refresh didn’t work), tried modifying and saving and Jackpooot!! (Take away: You can’t override files fetched with a url parameter). I then was able to beautify, modify and override the app.bundle.min.js implementation and achieved what I wanted.
On Chrome Version 109~ :
Go to F12 > Sources Tab > Overrides (You may need to click the chevron next to Page)
Select/Create a folder to contain Overrides
You can now right-click a file or editor window & save it for Overrides
Image of sources tab where Overrides is located
Something to note: if you are making dynamically loaded JS available in devtools via the helpful: //# sourceURL=Example.js comment, this network to local mapping will not work.
Note: Notice the "//# sourceURL=dynamicScript.js" line at the end of dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the Source Maps section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied name.
https://developer.chrome.com/devtools/docs/javascript-debugging
When you're using sourceURL, you can't actually find the respective JS file in the Sources tree where you might expect it to exist. It is available to open via the "no-domain" tree, however (or quick open with CTRL/CMD+P).
I'm still looking for a solution.
The easiest solution I found to this problem:
(keep in mind, I was manipulating an html page that lives on my machine)
open the associated html page from the command line so the page displays
for mac, that's simply $ open <name>.html
open Dev Tools
open Sources tab
in Page, open a new .js file there with whatever name you need
write in some text and save
This worked for me. Yes, I had to create a new .js file, but my directory locally recognized it was there when I pulled it, and my editor was updating in real time with the dev tools each time I saved either. At that point, my editor and the dev tools source tab had become one thing.
Currently on Chrome 100.0.4896.60 (Official Build) (x86_64).
I've got a js file with source maps; the override has always been spotted.
I'm able to override the map file (which won't work though for the debugging purpose) and the index.html file.
Apparently my issue is related to minified js with source maps.
Seem to work in relation to the chrome version installed.
I tried the following attempts but didn't work:
remove cache
disable / enable override
add the dir to the workspace
install chrome canary
To debug then I've tried:
build my file.min.js to test. In my case was production/file.min.js
start a npx http-server in production (cd production && npx http-server) which open to http://127.0.0.1
override index.html to consume http://127.0.0.1/file.min.js
Interesting considerations:
When i was doing basic overriding i had to replace the file manually all the times.
Now, I've got a watch task going on and i can basically refresh the page.
I can see as well the source map update.
It's simple! Right click on your page, Go to Inspect, go to the Network tab and tick the check box 'Disable cache'. Reload the page and you will see the effect.