How can I made edit to JavaScript file locally in Chrome - javascript

How can I made edit to JavaScript file locally in Chrome?
I following this article:
https://www.sitepoint.com/edit-source-files-in-chrome/
But in step 2, I can't edit the Javascript file. For some reason the file is ready only in the 'Sources' Panel.
How can I edit the javascript file locally?
Thank you.

Just FYI: The article you linked to is from 2013. Chrome dev tools changes almost weekly.
Sometimes just doing hard refresh on the page will allow you to edit the .js file from the Sources panel. It should be as simple as right clicking and choosing Save As....
If that doesn't work perhaps you could provide a url?

Related

How to modify JavaScript file on Drupal Site

Here is my problem:
I am in freelance and for a job on a Drupal site, I have to fix a JavaScript bug.
I find it, but I don't know how to "compile" my JavaScript file for the online site.
I mean that a find the right file, and modify the code and send it to the SFTP server but when I check the online site nothing change (even when a look at the file in the inspector, the program isn't modified.
I already try grunt command but nothing change.
First thing to check is if your changes are reflected in your local development machine (view the file locally). For changes in Drupal JavaScript or css to be reflected, make sure you’re editing the right file (right subtheme).
Check exactly what file you edited by doing view source and seeing the path.
Clear cache at Drupal (if you are on Drupal 7 check performance->cache and google where exactly the path is on Drupal 8).
CSS and js are aggregated and cached so cache clear re-creates them.
Clear the browser cache

How can I save all JavaScript files in Firebug?

I have a JavaScript web application and I am using Firebug to debug it.
In Firebug's Script panel I can see all JS files which the website is using:
Is there any way to download all these files?
Use spiderzilla Based on HTTrack
There are many ways to download the website assets. below are few ways.
wget --page-requisites url
HTTrack
Follow the similar answers.
https://superuser.com/questions/114769/plugin-for-firefox-to-download-the-entire-webpage-with-css-javascript
httrack-wget-curl-scrape-fetch
https://softwarerecs.stackexchange.com/questions/10216/download-all-remote-assets-js-css-into-local-machine-in-a-batch
You can always right-click a single file (in Chrome's or Firefox' DevTools or Firebug) and then click the option to open the file in a new tab, then press Ctrl + s to save it. But there is no way of saving them all at once.

Load separate sourcemap file in chrome dev tools

Is it possible to load an external source-map file (JSON), not included in the minified JS file used on a website?
So far the only ways I know of to include a source-map for a particular js file is to either inline it, add a link in comments or set the path in HTTP header.
So I wonder - is it possible to load a source-map file that can't be accessed via HTTP? For instance - load it from my local drive, and point it to the js file it is supposed to be mapping?
Cheers
I know question is old, but had it myself nevertheless. Here's how you do it in Chromium 63
Open Debugger
Right-click in source code area
Select "Add source map…"
Enter URL to source map file
if browser is able to download it and process it then sources appear as entry in source tree.
PS built with hidden source (separate files, no source comment)
PPS does not matter where files are hosted, because it is URL. Must be accessible by browser.
August 2022, Chrome 104:
Open Chrome Dev Tools
Go to "Sources" tab
Find the .js file you are looking for. Click on it.
Right click somewhere ON THE SOURCE.
Find "Add source map..." option there.
(I first wrote this as a comment to the other answer, but #christian-vincenzo-traina suggested having it as a separate answer.)

ASP pages not bringing in Images, CSS or JavaScript

My uncle's has got the files for his website that he got made a few years ago and needs something changed on it. So he has sent me the files as I am willing to make small changes as I know HTML and CSS. But when I open his index.asp page in a browser this only shows html even though the images, css and javascript files are linked properly.
I am not familiar with asp, I would really appreciate it if someone could let me know why the files are not being brought up when I open the index.asp file in a browser.
Thanks
Because when you just open the asp file on a browser, there's no web server intervention so that the ASP page is properly processed. You are just opening a file as if you were opening it on Notepad. You need to configure the whole site as an IIS Application and browse to the site by going to http://localhost/YourSite
First things first - as the previous comment says, you need to run ASP through an IIS based web site because the code needs to be processed.
If you're running through IIS and having this issue, check to see that your IIS settings are correct. Google "static content IIS" and you should find articles relating to this problem.

How can I see included JavaScript sources?

I am trying to script a web page using GreaseMonkey. (I am using Firebug for help in development.) The page has a small amount of JavaScript code, but that code pulls in other JS files from the site. Are the entire collection of JS files stored somewhere on the client side (i.e. on the filesystem somewhere) so that I can view them? Or better yet, is there a way I can view them in Firebug? I am a little overwhelmed by Firebug but will be able to follow instructions.
Click the script tab in Firebug. Then look immediately below the tab for a dropdown that shows all the scripts.
right click - view source

Categories

Resources