I've been experimenting with using Chrome DevTools as my primary authoring tool, and am now mostly using them.
As I continue to increase my usage, I'm running into some pain points.
Usually, when I begin working on a project, I now create a dedicated Chrome profile for it. I do this automatically by invoking Chrome with the --user-data-dir flag and storing the browser profile right within the project.
Then I go into the tools, set up my workspace, map my local directories, and so forth. This works great.
What doesn't work so great is that this is a very repetitive process. I'd love to be able to specify the workspace mappings within the project somehow, and then generate the appropriate profile. I'd also love to be able to set other preferences (like indentation, and various other settings on the DevTools "General" page) in a standard way.
I've thought of three ways this might be possible:
There might be an API for this, but I doubt it, as programmatic manipulation of browser preferences obviously is disfavored (but would someone have carved out an exception for DevTools?),
There might be a way to import/export DevTools preferences, and I might be able to generate the import format,
I might be able to figure out where they're stored in the user directory, and manipulate them myself (so far I haven't, though).
There's also one partial solution I've considered:
I might be able to copy a "template" browser profile to get some of the shared settings above. Then I'd still have to do the workspace mapping each time, but I might be able to get away with not doing the rest.
One really elaborate strategy I could try would be to use browser automation, as suggested in Google Chrome - how can i programmatically enable chrome://flags some of the modules from disable mode to enabled mode? ... but that seems like overkill even as I start using the stuff more heavily; I don't think I'm quite ready to invest that kind of up-front effort in it.
Is anyone familiar enough with how the Chrome DevTools preferences work to judge which strategies might be most promising?
There is no way easily sync DevTools settings. They are stored in localstorage scoped to the DevTools. Which means they are in a special sqlite DB which isn't easy to transfer between machines (plus you'd bring all the other stuff with it.)
Sadly, you are left porting this all around by-hand with each new machine.
Related
When deploying a Polymer app to production, what's the recommended way to avoid requests for Polymer's source map files? The files platform.js.map and polymer.js.map weigh in at ~800K. Even if those downloads are deferred, surely there is some user impact (e.g., on mobile devices) simply spending bandwidth getting those files, isn't there?
Currently, my deployment process simply skips over the .map files, but when looking at the production site, I still see the browser trying to find them. Those requests fail with a 404, since the files aren't deployed. In theory the 404s shouldn't slow anything down, but it's still distracting to see 404s show up. It makes it look like there's a problem when in fact there isn't.
I could write a Grunt task to strip off the //# sourceMappingURL line from the associated .js files, but I was wondering if anyone has experimented with other means by which to drop the source maps. Or have people found that there is literally no impact on user experience when including those files?
I would consider it a browser bug if any browser loaded source maps when the user isn't using debug tools on the site in question. Are you noticing a significant number of requests to your source maps in your logs?
If you're using Google Chrome Devtools and want the source maps to be ignored, you can go to settings and uncheck the corresponding "Enable Javascript source maps" check box.
I appreciate this question may appear broad. But it is because I am looking anywhere and everywhere for a possible solution to do something very simple.
The goal is from a web page opened in Chrome, to scan the DOM, extract specific elements and save them silently in some way that I can then access.
There is no intention for any of this to be published as an app or extension, it is simply me wanting to access my own rendered browser data and extract and store this data on my own computer. For this reason, I am currently finding Chrome's exhaustive sandboxing security frustrating and irrelevant to say the least.
I have a working Chrome Extension which extracts all of the data I want, has a list of 5 strings that I want to save and that's as far as I have gotten.
I have looked into these areas:
Existing NPAPI Plugins (could not get npapi file io to work).
Creating my own NPAPI Plugin - seems like a huge overhead and learning exercise simply to get external access to 5 strings
Every aspect of Chrome extension (and even App) apis (particularly their localstorage which is not accessible from outside the extension)
Any other thoughts?
I realise there is a solution through creating my own NPAPI plugin but I would like to believe that there is another approach that allows me to link a constructed DOM with my local system. I am open to any other option? (I have considered a Linux purely bash approach but I need to generate the DOM as though it was in my browser).
I just want to be able to access specifically extracted parts of a DOM on my local system, not write an entirely new C++ plugin to facilitate this very basic feature.
With HTML5's offline capabilities is it possible to create an app that will persist after the connection is lost and the browser is closed? Specifically, here's what I'd like to do:
Connect to the app while online. Download the entire app including a small database it runs on.
Close the browser and disconnect.
Open the browser again while offline and load the app from the local cache.
Thanks to Mark Pilgrim's excellent book I believe I have an idea of how to accomplish the first step, I'm mainly wondering if the last step is possible. If this is possible, I'm guessing it requires some configuration of the browser. Any settings I should be aware of that aren't obvious?
Thanks very much for any help offered.
The last step should be possible - it just depends on what extent you want to implement it to. To my knowledge it shouldn't require any browser settings. You just have to be aware of the limitations of local storage, which I believe is 5mb max at the moment (for most browsers). Obviously you'd have to perform the checks for such permissions as outlined int the Dive Into Html5 guide you linked.
The quickest and dirtiest way is to simply issue a GET request to your online app. If it responds correctly, then use the online version. If not, use the local cache. Just disguise the timeout/failed response as a 'loading' screen.
I would like to provide an installation of Chrome (or probably Chromium?) that comes pre-installed with my extension, installed to a separate folder and has the --enable-experimental-extension-apis turned-on by default. Would also be cool to be able to customize the looks and feels to be more suitable for my brand.
Does anyone know if its allowed by Google's TOS? Is it possible? Was it done before? Is there any easy way to do that, without hacking around on Chromium source code?
If you know enough C to modify some code, mini_installer is a good place to start. This is what people would be downloading anyway, so tweaking some of the code there to suit your needs would be the best bet. Install it where you like, make whatever changes before/after the install, etc.
Otherwise, you could write some kind of script that downloads and runs the installer, and then changes settings. For compatibility with your apparent target audience, a simple batch script would be the best bet.
Another option is Chromium Portable. You make any changes you like, and upload a zip file. All they have to do is download and unzip it. Most users can manage that, but pictures on the download page don't hurt. You could also write a small program or script to download the zip file, unzip it, and run anything that needs to be run (or Chromium it self).
It's technically possible and allowed. Indeed, there are a number of forks of Chromium, such as Iron and Comodo Dragon.
Whether it's a good idea is another question entirely. Unless you're prepared to maintain your fork on a long-term basis (and in particular, to provide software updates to your users on a frequent basis), it's probably not a good idea. You'd probably do better to instruct your users to install Google Chrome normally, then give them a link to install your extension.
As far as experimental extension APIs go, I'd avoid them. They may be removed or changed significantly in future versions of Chrome. If you must use them, just instruct the user on how to enable them.
I'm looking for a tool and I'm not even sure of the proper name. Please be patient with me as I explain.
I'm doing a lot of HTML/MVC 2 work. Using the standard MVC 2 view engine, I would like to have an editor that shows real time changes in the browser. If I re-arrange div elements containing standard HTML and some server side components, I would like the browser to update without a manual refresh.
Are there any tools that are currently available that would meet that requirement?
If you use firefox, you can use ReloadEvery plugin and set up refresh every x seconds. This will simulate real time editing.
There's an automatic refresh-on-change tool for IE. It's called ReloadIt, and is available at http://reloadit.codeplex.com . Free. It works with ASPNET MVC, or any server side technology. It does not require IIS. It does require IE.
It's not an add-on to IE, just a companion tool. It does not change the IE install, does not install a BHO or anything like that. So very low-impact installation.
You choose a URL that you'd like to auto-reload, and specify one or more directory paths to monitor for changes. Press F12 to start monitoring.
After you set it, minimize it. Then edit your content files, in whatever tool you prefer to use. When you save, the page gets reloaded. like this:
Similar to what #LukLed suggested, XRefresh is a plug in that will refresh your browser screen automatically.
Instead of refreshing every X seconds, XRefresh will watch a directory tree/set of files and only refresh when one of them changes.
It's great in multi-monitor setups, and saves a few seconds when switching between windows in single monitor setups.