I have these two files on my server:
/react/build/static/js/stats.js
and
/react/build/static/js/main.5c7483.js
In the stats.js file, it has this line at the bottom:
//# sourceMappingURL=main.8c33616f.js.map (I noticed the filename does not match)
The react app works fine, but I want to make some small changes. However, the developer has told me they completely lost the original source files due to a hard drive failure.
Is it possible to recover source files (or even anything that resembles source code?) I found this debundle package but couldn't get the configuration to work properly.
They told me the project was created using create-react-app.
In chrome dev tools, it says "Source Map Detected" - but using ctrl+p does not show any components. Just a few random js files like page.js, inject.js, common.js, etc
Well, this answer is late but just in case other people come here looking for answers (like me), here's how I solved it:
If you're lucky and the developers generated and uploaded the source maps then you shouldn't have any issue accessing the source codes.
I am not allowed to embed images yet so you may have to use the image links provided to see sample images.
Using Chrome(or any modern browser), browse to the website where the react app is hosted. Right-click anywhere on the page and select Inspect. Ctrl+Shift+I works too.
This will open up the dev tools window. Select the Sources tab.
Image showing the inspector tabs with the Sources option highlighted
Depending on the website's dependencies, you'll probably see several folders here. The first folder will be titled similar to the name of the website's URL. Open that up, that's where the sources for your website is located. Opening that folder will show yet another list of folders (assets, static, modules, react-components, src).
At this point, you may think your source codes are inside the src folder but that's not where yours are. To find yours, open up the static folder.
Selecting the static folder
This folder has three inner folders: css, js and node_modules. Your JS source files are inside the js folder so that's where to look for your source codes.
Image showing the expanded js folder
So that's it. I hope this helps. It definitely did help me when I needed it!
I want to download a webpage, say http://www.stackoverflow.com with nodejs. Meaning that I have an offline copy of the static page. It has to download the resources (like styles, javascript files, images etc) and update the references to local ones.
In any case I want an offline page that once opened looks exactly like the real page. Just like what happens when I choose file->save in a web browser.
Basically I want to replicate the function of
wget --page-requisites
(Although this does not download css and images properly)
The background is that I want to execute Javascript on an external website. This is (rightly) not possible due to cross-domain-policies. To avoid this, I just want to download the website and statically host it myself, execute my Javascript analysis-code and then delete it.
I'm sort of spit-balling on a solution that could work for this:
A package like js dom could be used to grab all the page's script, link, img, etc's source URLs. You could then GET and save each of those resources to your local environment and replace their src attributes with a new URL that points to your local copy. Then you could stringify the resulting HTML and save that as well. Then just serve the containing directory statically in Node.
Maybe just running wget --page-requisites from within node is the easiest solution?
I'll be interested to know what the final solution to this is. Hopefully something I said helps.
When I use Google Chrome's "Save as.." the cgi page is being downloaded as one single html and another folder with all required stuff in order to display it correctly offline. I tried many parameter but nothing worked properly as I expected. Also -p doesn't work.
GNU Wget 1.14 built on linux-gnu.
When I use -p option, get robots.txt and the .cgi file itself.
Can it be like this because of the cookies? Is there option that may fix this problem?
Is there another way? I mean for example if I put some parameters to chromium in the terminal.
Quoting from the man page:
‘-p’ ‘--page-requisites’
This option causes Wget to download all the files that are necessary
to properly display a given HTML page. This includes such things as
inlined images, sounds, and referenced stylesheets.
Problem was that I needed to use cookies to pass the log in session. So --load-cookies seems to solve my problem.
I am trying to test some JavaScript on my local computer using the Chrome browser but Chrome will not load local resources. Is there an easy work around for this?
If you are trying to just test the functionality of your JavaScript file: create a blank HTML file, add a link to your JS file as you would normally load a JS file from HTML, and open the HTML file in Chrome. Go to the JavaScript console. You'll be able to interact with the functionality of your JS code as usual. You wouldn't need to set up a server for this. If still not clear, here's an example:
<html>
<head>
<script type = "text/javascript" src = "path/to/your/jsfile"></script>
</head>
</html>
You can use a light weight webserver to serve the file.
For example,
1. install Node
2. install the "http-server" (or similar) package
3. Run the http-server package ( "http-server -c-1") from the folder where the script file is located
4. Load the script from chrome console (run the following script on chrome console
var ele = document.createElement("script");
var scriptPath = "http://localhost:8080/{scriptfilename}.js" //verify the script path
ele.setAttribute("src",scriptPath);
document.head.appendChild(ele)
The script is now loaded the browser. You can test it from console.
To load local resources in Chrome when just using your local computer and not using a webserver you need to add the --allow-file-access-from-files flag.
You can have a shortcut to Chrome that allows files access and one that does not.
Create a shortcut for Chrome on the desktop, right click on shortcut, select properties. In the dialog box that opens find the target for the short cut and add the parameter after chrome.exe leaving a space
e.g. C:\PATH TO\chrome.exe --allow-file-access-from-files
This shortcut will allow access to files without affecting any other shortcut to Chrome you have.
When you open Chrome with this shortcut it should allow local resources to be loaded using HTML5 and the filesystem API.
For security reasons, modern browsers won't load resource from locally running HTML files (files using file:// protocol in the address bar).
The easiest way to get a modern browser to load and run JavaScript files in local HTML files is to run a local web server.
If you don't want to go through the trouble of setting up a Node or Apache web server just to test your JavaScript, then I'd suggest you install Visual Studio Code and the Live Server extension.
Visual Studio Code
Visual Studio code is a source code editor for pretty much any programming language under the sun. It has built-in support for JavaScript, HTML, CSS, TypeScript, and almost any kind of language used for Web development.
Install Visual Studio Code
You can get the Visual Studio Code editor for your platform from https://code.visualstudio.com/. It supports Windows, Linux, and Mac. I think it also works on your Surface Pro if that's your thing.
Add the Live Code Extension
After installing VS Code, you can add the Live Code code extension using the Extension panel (Ctrl+Shift+X in Windows) in Visual Studio Code.
Live Server Extension
After adding the extension, you should see a "Go Live" button in the bottom-right corner of the Visual Studio Code IDE (as shown in the above screenshot).
Open in Code
Open the root folder where your HTML and JavaScript files exist in Visual Studio Code and click the "Go Live" button. Optionally, you can right-click the HTML file in the Explorer (Ctrl+Shift+E) and select Open with Live Server from the pop-up menu that appears.
Open with Live Server
This should create a locally running web server and open the file or folder in your web browser. If your file paths are correct, your JavaScript files should also load and run correctly.
Troubleshooting
If for some reason, the page doesn't load in your favorite browser, check that the address and port number are correct. If the Live Server is running, it should display the port number in the bottom-right corner of the Visual Studio IDE. Make sure the address in your browser says http://127.0.0.1:<PORT>/index.html where <PORT> has the same number as shown in the status bar in Visual Studio Code.
Use Chrome browser and with the Web Server for Chrome extension, set a default folder and put your linked html/js files in there, browse to 127.0.0.1:8887 (0r whatever the port is set at) in Chrome and open the developers panel & console. You can then interact with your html/js scripts in the console.
The easiest workaround I have found is to use Firefox. Not only does it work with no extra steps (drag and drop - no muss no fuss), but blackboxing works better than Chrome.
You can do it by a feature of chrome's DevTools: Snippets
Create a new snippets
Copy and paste the file you would like to execute.
Hit CtrlEnter to run the snippet
Windows 8.1 add:
--allow-file-access-from-files
to the end of the target text box after the quotes.
EX: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Works like a charm
Running a simple local HTTP server
To test such examples, one needs a local webserver. One of the easiest ways to do this is offered by Python's SimpleHTTPServer (or http.server, depending on the version of Python installed.)
# 1. Install Python 3 & use:
python3 -m http.server
# On windows, instead of "python3" try "python" or "py -3"
# If you installed python version 2 then use:
python -m SimpleHTTPServer
# 2. To serve a specific folder use the --directory flag:
python3 -m http.server --directory /Users/junaid/WebstormProjects
# Note: I use MacOs & I have given the absolute path to my projects folder & I was able to serve my desired folder.
Here's what I did by creating 2 files in the /sandbox directory:
First file: sandbox.js
Second file: index.html
const name = 'Karl'
console.log('This is the name: ' + name)
<html>
<head>
<script type = "text/javascript" src = "file:///Users/karl/Downloads/sandbox/sandbox.js"></script>
</head>
</html>
You can then use Chrome or any browser to inspect and debug/console your code!
setup
You will want to serve the file from a web server. Everything else will be quirky workarounds that might differ greatly from the final result. On the web, files are being served via web servers. You'll want to mimic that locally.
Since you're apparently (at least part-time) being a web developer, do yourself a massive favour and install node, if you haven't already. It comes bundled with the npx binary, which we'll use. Make sure you have a recent LTS version. Bonus points for using n, which will make it easy to stay up to date with your versions, and even switch them as you need.
steps to take
Inside the folder where your file is located: npx http-server -c-1
You can now access the file at http://127.0.0.1:8000/filename
Last thing to do is make the browser load the file. Magesh's answer works well for that, but I would recommend putting that snippet into a "custom js" extension. This one has served me well so far.
With everything in place, simply reload the page to get an updated version
of your local file.
Note: this question comes top on google when you search for "chrome read local css without server". So...
If you really want to serve a local webpage and load its CSS and JS, and you really do not have or don't want to use a http server, then don't load the scripts nor styles; inline them.
Instead of something like this:
<link rel="stylesheet" href="somefile.css">
Define the style like:
<style>/*Here goes all the CSS file content*/</style>
And the same with the JavaScript files. The HTML file will be larger, but it will work.
Basically you just have to copy the file contents and paste it inline.
You really should use a server, but if you are forced to, you can use this method.
If you still need to do this, I ran across the same problem.
Somehow, EDGE renders all the scripts even if they are not via HTTP, HTTPS etc...
Open the html/js file directly from the filesystem with Edge, and it will work.
for my use case, i need to startup a local server, create working an interactive html page, and open it for the user to be able to interact with it. the problem was how to set the local server's web root to my temp working folder where i create these dynamic files. this was a quick and dirty solution.
In the below code, LOCAL_WEB_DIRECTORY is essentially the root. and i then create/copy the files i want to open in the brower to that directory + /templates
import webbrowser
from http.server import ThreadingHTTPServer, SimpleHTTPRequestHandler
httpd = ThreadingHTTPServer(('', 8001), lambda *_: SimpleHTTPRequestHandler(*_, directory=config.LOCAL_WEB_DIR))
server_thread = threading.Thread(target=httpd.serve_forever, daemon=True)
server_thread.start()
webbrowser.open('http://localhost:8001//templates/' + work_html)
while True: sleep(1)
Not sure why #user3133050 is voted down, that's all you need to do...
Here's the structure you need, based on your script tag's src, assuming you are trying to load moment.js into index.html:
/js/moment.js
/some-other-directory/index.html
The ../ looks "up" at the "some-other-directory" folder level, finds the js folder next to it, and loads the moment.js inside.
It sounds like your index.html is at root level, or nested even deeper.
If you're still struggling, create a test.js file in the same location as index.html, and add a <script src="test.js"></script> and see if that loads. If that fails, check your syntax. Tested in Chrome 46.
The easiest way I found was to copy your file contents into you browser console and hit enter. The disadvantage of this approach is that you can only debug with console.log statements.
Look at where your html file is, the path you provided is relative not absolute. Are you sure it's placed correctly. According to the path you gave in the example above: "src="../js/moment.js" " the JS file is one level higher in hierarchy.
So it should be placed as following:
Parent folder
sub-folder
html file
js (this is a folder)
moment.js
The double dots means the parent folder from current directory, in your case, the current directory is the location of html file.
But to make your life easier using a server will safe you troubles of doing this manually since the server directory is same all time so it's much easier.
I'm using the Moxie code TinyMCE text editor (http://www.tinymce.com/) for content entry on a number of sites. At the moment I have the tiny_mce folder sitting in the folder of each site. This means that I have lots of copies of the same .js files.
I think it would be better to have one copy of the tiny_mce folder and reference it for each site - so if I make a change, or upgrade the tiny_mce I only have to do it once. Also, if I make a new site I can reference the same one to save needing to upload or copy another 9Mb of duplicated files onto the server.
I have tried putting the tiny_mce into a folder outside the individual websites and setting it up as a site on localhost that they can see.
I then include the javascript from each site like this:
<script type="text/javascript" src="http://localhost/MCE/tiny_mce/tiny_mce.js"></script>
I'm pretty sure the the file can be found by the site - I've tested with a simple javascript alert box test which works fine - and if I "View Source" and check the link it's using, I can access the tiny_mce.js file - which is the correct file.
However, the tiny_mce doesn't work.
I'm guessing there are some kind of dependencies or configurations that I'm not aware of that are causing a problem, but I'm not sure quite where to start to find out what isn't working. (I don't get any errors, it just doesn't load the tiny_mce)
Has anyone managed to get tiny_mce to share it's source files across multiple sites? Does tiny_mce require the .js files to be inside the root folder of the site in order to work?
Has anyone managed to get tiny_mce to share it's source files across
multiple sites?
I have not tried it yet.
Does tiny_mce require the .js files to be inside the root folder of
the site in order to work?
No.
Depending on your server system and in case your different website files are stored on one physical server device you could use a hardlink or softlink to the shared tiny_mce_folder (which should be accessible from the net too).