Website Development using Google Chrome
In one of the latest updates to the Google Chrome browser, a security feature was added as part of web standards moving toward proper secure websites using SSL certificates under the HTTPS protocol. What we discovered however, is that websites that are still under development that have form elements for passwords or credit card numbers are being flagged (and rightly so) as part of an insecure website. The notice of this isn't the problem. A second effect of this new feature is that the Google Chrome browser takes it upon itself to completely disable the form. Again, on an active website this is a nice security feature. It doesn't give the user the opportunity to enter data that could possibly be sent over an insecure site.
From a developer's standpoint, it becomes difficult to do any light programming tests or styling because the forms don't display. In searching for any mention of this issue, before we were aware of this specific change, we found nothing about how to disable this feature so that tests could be run. We were fairly certain that it would be part of the Google Developer Tools for Google Chrome, but there don't appear to be any easily accessible rules that describe this issue.
We did a thorough review of all of the tabs in the Google Developer Tools. We wanted to see if there were any settings that may have needed adjustments to allow for the forms to render even though our development sites are under standard HTTP protocol. There was nothing specific to our issue, however we did come across the browsers caching settings. This was about the only thing we could find that looked like it might help. By disabling the caching in the browser, it forces the page to reload from scratch. It retrieves all of the information from the server as if it were the first time. This bypasses the security protocol in the browser that prevents the offending insecure form from rendering. It is recommended that if you use the Google Chrome Browser on a daily basis that you do not disable this caching as this new feature is quite helpful in helping prevent users from accidentally sharing personal information on insecured websites.
For the developers however, the following is a quick step by step on finding and disabling the caching in the Chrome browser so that you can develop your styles and do your light functional tests. (The following steps are for a Mac. PCs should have a similar, if not the same set of steps)
- Step 1: Open the developer tools. View -> Developer -> Developer Tools
- Step 2: Select the Application tab;
- Step 3: In the left navigation bar under Application, select Clear storage;
- Step 4: In the settings to the right of the navigation bar;
- Step 5: Scroll to Cache and uncheck Cache storage and Application cache;
- Step 6: Close the developer tools, and refresh the page on which your form is located.
Your browser's cache is a useful tool that helps webpages to load quickly. The storage of frequently used webpage assets makes for a fast and efficient user experience. It's just a bit of a pain when it comes to development.