I currently manually open HTML files using Brave Browser and print the files to pdf files. I want to automate this process in the command line. Is there a way to do it? Since Brave is based on chromium, solutions based on chromium and google-chrome are also welcome.
This is a common use for calling the executable in headless or kiosk modes.
Your milage may vary compared to running heads up with a robotic puppet to press buttons for you, but more often than not is so much simpler for every day basic use in a batch file for multiple uses it is a second or so for each pdf generation.
Edge is not different to Brave or Chromium's so find the executable and append here using windows user folder
--headless --enable-logging --print-to-pdf="%UserProfile%\Documents\Demofile.pdf" --disable-extensions --print-to-pdf-no-header --disable-popup-blocking --run-all-compositor-stages-before-draw --disable-checker-imaging "HTTPs://url"
So darn quick I did not know it had run until opening the result, however note it needs the target to not pop-up blockers like google does, hence next step up is a button pusher to replace you by eating cookies.
I am working on a local project (read: offline) and I am trying to get Brackets' live preview to work since it comes in handy quite often.
Right now I have opened my project files using Brackets' "open file" option since it supposedly maps the path to the source files. Although I am getting an error saying In order for Live Preview to connect, Chrome needs to be relaunched with remote debugging enabled.
I have read else where that Chrome, by default, does not need to be relaunched for that change and that Brackets force this flag by itself.
I have tried reinstalling Brackets, launching with another project and searched all over Chrome for this flag and did not find any thing.
Any tips?
This page shows you how to instal remote debugging! It's a Chrome dev tool. It's geared towards android apps for whatever reason, but I had that same error, and following the instructions on that page helped me launch the brackets page.
If that doesn't work, here are some troubleshooting tips that have helped me out with live preview:
1) Make sure your filename has a .html at the end
2) Use different browser (I've found chrome to be a bit finicky with brackets)
3) Make a different blank file, launch that, then launch the file
Open the folder, not the file, and then select the file.
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.
I am currently beginning a project where we want to build an Interactive Whiteboard (educational activities) and deploy via CD-ROM. I want to build the project in HTML5 for it's interactivity and then somehow compile it to both .exe. and .dmg so when the CD-ROM is inserted it autoplays the 'Game'.
How is this possible? Any help/advice would be greatly appreciated. Thank you.
I already made a project using pure C (WinAPI) on github that can pack HTML files into single EXE using resources.
http://github.com/dns/WinAPI-Embed-Browser/releases
Use: res://programname.exe/test.html as path to access html files from your EXE file.
From here you also can hide the window border & just showing the content of your HTML app, or even running on fullscreen. This is very useful if you want to make interactive CD-ROM.
On Mac, you can use Delphi/Lazarus TWebBrowser control to load html files. However I don't know if mac program can access files from resource or not.
HTML 5 is a browser technology, so I think as long as the pc you are installing on has the latest browsers, installing your app should work fine.
Can you tell us why you want it as a CD-ROM based installation, where as you can easily host it online?
You may not need any .exe wrapping. Here is an approach.
Important: your autorun will be often disabled, [not so] quietly. Provide some instructions for running your application manually.
So:
Google for running a portable version of Firefox or Chrome from a CD. Have the browser prepared. Put it in a [sub]directory representing your CD.
Put your content there.
Create a .cmd file to invoke the browser with a command like,
FirefoxPortable.exe index.html
Create autorun.inf (details googlable) to call the above batch file.
Make a CD image from that directory. There are lots of CD burning applications that can do that.
Test.
We are trying to distribute a basic HTML file with some links to a PDF document in a USB drive for advertising purposes. The idea is that an autorun opens up this HTML in the default browser. However, this might not be a good idea since it would look very amateur-ish and we will have to rely on the default browser's technology (which unfortunately has a good chance on being IE6/7!)
We've explored a few alternatives, but we can't find one that really fits what we are trying to achieve:
Mozilla Prism
Altough it seems like it's designed with offline web apps in mind, the executable creates files in the user's AppData directory and it's hard to configure the default paths. Also, Firefox doesn't have a default PDF viewer, so we will have to depend on the user's default PDF viewer (which might be Adobe Reader)
Mozilla Chromeless
Since Prism is inactive, the idea is still developing with Chromeless, which allows the developer to create the browser interface with basic HTML/JS/CSS. The main issue here is that somehow the build isn't loading HTML, all that's showing is a gray iframe. I'm not sure if it's just me, because there's nothing on the issues page.
Portable App
We could throw in the portable version of Firefox or Chrome and customize the XUL for Firefox or open Chrome in app mode.
Firefox's advantage is that it kind of supports relative paths (resource://), but it doesn't have a built-in PDF viewer. Chrome has a very good and lightweight PDF viewer and the built-in app mode is a very useful feature for us, but I can't find how to open a local path without the usual absolute path (file:///C:/) since we don't know what's the drive's letter.
Has anyone figure out how to handle this kind of issues? Thanks.
This has been asked three years ago, but it's unanswered, listed high in Google, and I stumbled over the exact same problem and can imagine that many others that seek to ship portable web apps that can be run locally and with a minimum of dependencies will encounter this issue, too.
The solution I am now going with is the node-webkit.
You can treat it like a portable version of chrome, however it excepts a relative path to your app's entry point, is about 40 MB smaller, and much more customizable than the --app mode of chrome (which isn't customizable at all if I remember correctly).
Github & Download:
https://github.com/rogerwang/node-webkit#downloads
An extensive guide:
http://thejackalofjavascript.com/getting-started-with-node-webkit-apps/
My usage suggestion for Windows:
First create an app package as explained in the guide linked above
For the node-wekit to load with your app, you need to start it like this:
nw.exe app.package
Where nw.exe is in the root of the zipped folder you downloaded and app.package is a zip file (can have any name) that contains your app data and package.json.
To do this silently, you can use a BAT file containing the (amended) call above and a VBS file containing something like this:
CreateObject("Wscript.Shell").Run "cmd /c launchNW.bat", 0, true
launchNW.bat being the name of your BAT file. Now run the VBS file; a window containing your web app should pop up without the command window appearing with it.
Finish reading the linked guide to learn more about customization options to do things like hiding the browser UI etc.