How to visually personalize Google Chrome for development - google-chrome

I'm using the little setup that ShimmerCat provides for web development: SOCKS5 with built-in DNS and private certificate authority. For those of you that don't know how it works, it basically means that once you start your development web server, you invoke the browser using a helper script. This script opens a browser instance with completely separated user directory and configuration. Then it is just a matter of opening the future website as it were already deployed on the Internet, the SOCKS5 and built-in DNS emulation does the magic. For example, if the site is www.my-cool-client-site.com, I just open the locally running version by typing that address in the browser.
It's all very neat and functional, but now we have deployed our real site on the Internet, and as expected everything just looks the same as in my local development setup, including the address in the browser address bar and the green padlock icon. More than once now I have found myself banging my head for "a bug" that has turned out to be me confusing the development project with the site already deployed on the Internet. Therefore my question:
Is there a way to personalize a Google Chrome profile in a very obvious way so that I can't confuse my development configuration with the normal configuration that I use to browse the Internet?

Related

Chrome Web Serial API not working in VueJs Web app

I'm developing an enterprise web app with Vue.js, and I would like to use the Web Serial API in Chrome. On the linux machine that I'm developing on, I went to this Chrome flag chrome://flags/#enable-experimental-web-platform-features and enabled it. Then I did console.log('serial' in navigator) and it returned true, meaning that the flag is enabled. All is good so far.
So I went and did the same thing on the corporate computer I need to be using (running windows 10). I enabled the flag in Chrome, restarted it, and ran console.log('serial' in navigator) on the tab running the web app, but it returns false, which is bad because I need it to be true. But when I run that code on a different tab, it returns true. How could my web app be changing the navigator? So I can't use the Web Serial API on the one computer that needs to be using it and I don't know why.
Any help is appreciated.
UPDATED. The problem is not specific from vue js, you should make the script execute from a secure environment, either localhost or from a ssl secured domain. This security concerns are covered on this draft https://wicg.github.io/serial/#security.

Disable internet access for testing ionic app but still serve files from localhost

I have an app that I'm testing on localhost via ng serve, and want to test the app offline.
I know in dev tools I can disable network access, however, this also prevents the files being served from localhost.
Currently, the only way I have found to test the app offline whilst still serving the files from localhost is simply to enable flight mode on my own computer, however, is there another way to achieve this?
Example screenshot, running ng serve whilst network is disabled
I think you are on the right path, but definitely there are alternatives to achieve the same results. The other possible ways I can think of:
Changing Internet Proxy Settings to point to a non-existent server, will block all your outgoing traffic but localhost.
Block outgoing traffic with Firewall.

FireBug in Chrome doesn't show up on local websites

When I right-click on the local html page and select "Inspect with FireBug Lite" nothing happens... on regular online sites it works except for "https://chrome.google.com/webstore/category/apps"
anyone had the same experience? I have the latest version of the extension (but it's from 2011 :/)
UPDATE: on some local sites it does show! on two web apps (PHP, Rails) it did work, but on a few static HTML files I tried it didn't....
Apparently this is normal...:
It doesn't work on local pages
If by "local pages" you mean files accessed via "file:///" protocol then yes, Firebug Lite doesn't work with "file:///" protocol. This is a JavaScript security restriction to prevent malicious web pages from accessing files in your your machine. Also, please note that the while you can load a "local page" in the browser (it will render properly) it will NOT behave exactly the same as when hosted in a web server.
Solution:
You can solve this problem by loading your page in a web server installed in your machine, so you can access that local files through "http://" addresses. This is the best solution: it is safer, and you'll get the most of what Firebug Lite can give you. I recommend using Apache HTTP Server, but you can use anyone (like IIS for example).
Which exact URL are you visiting? It is an internal Chrome's page
(like "chrome://downloads/"), or some page related to Google Chrome
extensions "https://chrome.google.com/extensions/")?
Google Chrome won't allow content scripts (required by Firebug Lite)
running on such pages. The problem is that Chrome does not inform the
user and neither the extension about it. In other words, there is no way
to Firebug Lite know if the content script was loaded or not, and we
worked around this by sniffing the URL and detecting when you visit
URLs that begins with "chrome://" or "https://chrome.google.com/extensions/",
alerting users in such cases.
You've few options to fix the solution.
One is to use Mozilla Firefox.
Second, install a web server on your system. Try WAMP or XAMPP. Once installed, store all the web pages in the root folder of the web server you just created. Save all the web pages and html files in C:\xampp\htdocs. Navigate to the locally stored webpages using your web browser by going to “127.0.0.1/index.html” or “localhost/index.html”.
Now you can use Firebug-Lite for Google Chrome on local files.

How can I launch an OSX application from the browser?

I'm coding an admin panel with a web interface that will only be run locally (not client-facing or hosted on an external server), and it would be helpful if it could launch an application from an <a href="">. Is this possible? I understand that this could be a browser security thing, but I also know that there are iTunes and App Store links (not quite sure how those work either), and I assume this is also possible for launching "x" application. How can I do this?
it is only possible if the application you want to start registers its own URI scheme with the OS. Though you could write your own app that starts other apps on demand. You'll have to register your own scheme then.
Found a solution! Instead of using an <a href="">, I've decided to run a shell command from a PHP script that just does open application_name.app and redirect back to the referrer.

Hosting subdomains separately with and without SSL while using a wildcard certificate

I'm having a strange problem with a separately hosted subdomain I have. I'm running an application on Engine Yard, let's call it mysite.com. I have a wildcard SSL certificate installed there which covers all the subdomains (things like api.mysite.com). We recently decided to migrate our blog to be hosted independently (right now it lives on wordpress.com). Because I can't run the blog alongside our Rails app with ease on Engine Yard, I decided to grab some cheap hosting space from Dreamhost to host our Wordpress blog there. I set up the server there to fully host our subdomain (let's call it blog.mysite.com), and updated the DNS A record on Hover (our DNS provider) to point blog.mysite.com to the Dreamhost server. So here's the issue:
If I go to blog.mysite.com via Firefox or Safari on my Mac I see the basic Wordpress install which I set up. However, if I try to view things with Chrome I get the following error:
This webpage is not available
Error 118 (net::ERR_CONNECTION_TIMED_OUT): The operation timed out.
This happens on all Macs running Chrome I could get my hands on. I tried both clearing the cache and flushing the DNS but nothing. The weirdest part is Chrome keeps looking for https://blog.mysite.com instead of http://blog.mysite.com. There is no SSL cert installed on the subdomain for the blog on Dreamhost because it's not necessary.
Has anyone ever come across this before? And in case anyone wants to try the actual address is http://blog.frestyl.com.
sounds like you have a 301 permanent redirect that Chrome registered http://blog.frestyl.com -> https://blog.frestyl.com. Besides clearing the cache I'm not sure what else can be done.