I am trying to figure out how I can make a change to javascript and then reload the page with the new javascript changes in the same way you can change CSS and html on the fly. I understand that the javascript will need to actually reload the page, but the problem is once you reload it redownloads the original javascript on the server.
So how can I modify the javascript on the fly so that I can test the design with the new javascript changes without having to upload it to the server?
Perhaps you're wanting to use the LiveEdit feature in Chrome? Using it is as simple as opening the Developer Tools, go to the Sources panel, and use the Ctrl/Cmd + Shift + O to find the script you want to edit. Then click the pause button to pause debugging, modify the script as needed, then Ctrl/Cmd + S to save your modifications, and finally click the pause/resume button to resume execution.
Related
I'm looking for a way to recreate the functionality of a refreshing page extension on a browser (e.g. Auto refresh plus in Chrome) by using javascript. The problem is that I have no ideia how to achieve that.
I must find a way to refresh the page every second or so, click on a link that appears on the page from time to time, add a sound effect for when it appears and send an e-mail notification every time it appears.
I'm trying to use a simple javascript snippet to run in the console in order to refresh the page:
win1 = window.open("https://www.myUrl.com/");
timer1 = setInterval(function(){win1.location.href="https://www.myUrl.com/"}, 1500);
However, this implies running code from tab A on tab B which I found very challenging.
The code can't run on tab A alone because at the time it refreshes the page, it gets erased from the console.
I know it would have been so much easier to use an extension, but the platform I work for does not allowed any extensions.
I have basic HTML and javascript knowledge, but I find this would be a good project to learn more.
Also, if the solution involves other languages, I just need a direction to know where to look for and start this project.
I'm quiet new to JavaScript and need your help concerning the following problem:
I've written a JavaScript to subscribe automatically to a gym class every monday at 7 a.m..
I have to click a button that's opening a new tab where I have to fill my personal data. The URL of the new tab is variable so I cant do it via
window.open(URL,"_self")
Is there a way to continue the script in the new tab or open the website in the same tab?
Thanks!
Because of the objections mentioned, that doesn't sound feasible to me - at least in this form. If you want to run a script on the external website, then simply use a browser solution such as:
Tampermonkey (https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en)
Greasemonkey (https://addons.mozilla.org/de/firefox/addon/greasemonkey/)
There you can install your script and have it automatically fill out your registration.
If you want to automate this completely without doing anything on your part, then you will not be able to avoid an (external server-side) solution such as a NodeJS application with puppeteer (https://github.com/puppeteer/puppeteer) running every X days.
I have followed the instructions for debugging with javascript in webstorm:
The native "Live Edit" plugin is enabled
Live update "Javascript, HTML and CSS" in the "Live Edit" settings.
Restart if hot swap fails
Then, I debug the current html file by clicking Debug in the right-click context menu.
This works for refreshing HTML and CSS content without reloading, but changes in Javascript are not reflected 😱.
How can I live edit Javascript in Webstorm? Other answers here on SO are all about the deprecated chrome extension.
JavaScript 'live editing' is supported, but the behavior is different for external and embedded code. Changes in embedded JavaScript always cause immediate page reloading, so the page updating is instant; whereas changes in 'external' javascript (linked via <script src="path/to/file.js") are hotswapped: new code is loaded to the browser instantly, but the results of the change will be visible only when you do something to trigger this new code. For example if you change the onClick handler and write new text in alert(), you will see the new text after the click without reloading the page. Same for functions triggered by timer, for example. But if the JavaScript code is executed only on page load (and not on certain event), you have to manually reload the page to see the results - Live Edit doesn't force new code execution, it changes the code and not application state.
Is there an application that allows me to select a section of a web page, and then outputs all js used there? I've been told I can do this with Chrome Inspector, but haven't had any success so far.
Example:
On this page - http://preview.oklerthemes.com/porto/2.7.0/page-left-sidebar.html - there is a tabbed box in the sidebar. I want to easily grab all the JS/CSS needed for that box. I usually use Inspector to look at all the styles, and go and grab theme from each CSS file, but I don't know how to do this for the JS.
It's not quite clear from your question what you're asking.
Are you trying to see what JS causes writes or changes to a particular part of a web page? The easiest way would be to open the page with the element inspector, right-click a particular chunk of HTML and stick a breakpoint on modifications.
The next time a function causes any changes, the breakpoint will trigger and you'll be able to crawl up the call stack to see what the cause was.
I am making a greasemonkey script and i would like a link to go forward and modify the current html and allow the user to click back to go to the original page.
How might i do this? using jquery + greasemonkey + javascript. Targeting firefox mostly.
-edit- http://jsfiddle.net/ seems to do it. If you write random html in the html section, hit run, change the html and hit run again. You'll be able to click back/forward to see the output change (however the html input box stays the same). I am using firefox to view this. Thats the effect i want.
it appears the magic is done on line 91. Is this submitting a form in a frame (perhaps the results frame?) and that is causing the movement in history?
88 run: function(e) {
89 e.stop();
90 Layout.updateFromMirror();
91 document.id(this.options.formId).submit();
92 this.fireEvent('run');
93 },
I don't know if that is possible at all because it is the browser itself that takes care of the navigation history. A new history item is added only when you visit a new page.
If I am not wrong you would like the user to turn on/off the changes you make to the page without enabling/disabling greasemonkey and reloading the page.
The only solution I see for this is to take care of it yourself. Save any changes you make to the page so that you can restore it and add some UI to the page to make the user turn on or off your changes.
EDIT 1:
It seems that jsfiddle.net loads a new page to do that. Using firebug you can see it is not doing any AJAX request to run the code, it is just loading a new page (maybe the same page, with different parameters, but nevertheless it is loading a page.)
EDIT 2:
Yes, maybe it is loading the page in a frame. As you can see from the HTML:
<iframe name='result' frameBorder='0'></iframe>
But this does not change your situation. If you want your logic to be in your greasemonkey script you can't load a new page. Otherwise you should upload a web page somewhere and make it load in an iframe passing it the HTML you want to modify: this is definitely not what you want to do.
It sounds like you want to use a history manager. You could either track the changes you make and undo them when the user goes back, or possibly call a page refreshing function.