Configure Charles for Chrome

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information)

You can download the Charles

After installing following are the steps to configure it

1.Register Charles

2.Goto Help->SSL Proxying->Install Charles Root Certificate



3.Select Local Machine and click on Next

4.Browser the certificate and select “Trusted Root Certification Authorities”

5.Click on Tools->Whitelist

6.Click on Proxy->SSL proxy settings



After performing the above settings Charles will work fine in Chrome browser, for some reason it was not working on firefox at my end.

Follow the steps to make it work:

Windows / Internet Explorer
First quit Charles. Then go to the Internet Options in your Control Panel. Go to the Connections tab. Click on the LAN Settings. You’ll see a Proxy panel. Uncheck the Use a Proxy checkbox. Click OK until you’ve closed the Internet Options.

Mac OS X
Go to your System Preferences. Open the Network preferences. Choose the appropriate Network Port (you may need to reconfigure more than one if you have more than one) and click Configure. Go to the Proxies tab. Look in the list of proxy servers, you will see that Web Proxy and Secure Web Proxy are active. Uncheck those or reconfigure them as required for your network. Click Apply Now and then close the Network preferences.

Firefox
First quit Charles. Then go to the Firefox Preferences window, General tab, click Connection Settings. Then choose “Direct Connection to the Internet” or enter whatever proxy settings are required for your network. Click OK and then close the Preferences window.

Advantages Of Using WordPress

While selecting web platform it is very necessary to understand the pros-cons of the platform. Following are the advantages of WordPress

  1. Ease of Use

WordPress is very easy to use and has an intuitive interface.  Adding new pages, blog posts, images, etc. on a regular basis is a breeze and can be done quickly.  Because the technology is so simple, time spent on formatting is greatly reduced.

  1. Manage Your Website from Any Computer

WordPress is browser-based. You can log in from any Internet-connected computer and manage your site.

  1. No HTML Editing or FTP Software Required

WordPress is a self-contained system and does not require HTML editing software (such as Adobe Contribute or Dreamweaver). You can create a new page or blog post, format text, upload images (and edit them), upload documents, video files, image galleries, etc. all without the need for additional HTML or FTP software.

  1. Search Engines Love WordPress Sites

The code behind WordPress is very clean and simple, making it easy for search engines to read and index a site’s content. In addition, each page, post, and image can have its own meta tag keywords, description, and title, and be optimized for specific keywords, allowing for very precise search engine optimization.  You can also use tags to further enhance your search engine optimization efforts.

  1. You Have Control of Your Site

No more waiting for your web designer to make simple updates to your site. With WordPress, you have control of nearly every aspect of your site and can easily make those simple updates yourself.

  1. The Design of Your Website is 100% Customizable

WordPress acts as the engine for your website. The look and feel of the site can be 100% customized so your brand can shine through on your site and provide a unique experience to your visitors.

  1. A Blog is Built-in and Ready to Go

Since WordPress was originally created as a blogging platform, blogging capabilities are built-in and are easy to integrate, if desired. Setting up RSS / email subscriptions to your blog, commenting capabilities, and automatically adding the most recent blog posts to other pages of the site (your home page, for example) are also very simple to set-up, and help to extend your company’s reach and make your site more dynamic and interactive.

  1. Extend the Functionality of Your Site with Plugins

Want to add an event calendar, video gallery, Twitter Feed, Facebook Fan Box, and more to your site? WordPress makes this possible with plugins, most of which are free or very reasonably priced.

  1. Your Site Can Grow as Your Business Grows

WordPress sites are very scalable. You can have hundreds of thousands of pages or blog posts on your site and the performance of the site will not be compromised in the least.

  1. Have Multiple Users

As an administrator of a WordPress site, you can set-up multiple users for the website and assign access levels and capabilities to each user.

How To Host a Static Website on WampServer

Hope you have already installed WAMP on your Windows machine.In case not then Visit WampServer Installation.

After installation, if the mysql fails to start, the icon of WAMP on the status bar is not green then the possibility is that the MySQL service is not ‘ON’

In that case, MySQL must be running

So that makes me think that the second MySQL Server running on my system.

MySQL can be installed as part of some other tools/apps. If that is the case they normally set the service name to MYSQL and set it to start automatically so it is probably running before it gets to start WAMPServer and therefore blocking port 3306. The WAMPServer MySQL instance is called wampmysqld (or wampmysqld64 if you run the 64bit WAMPSever). Have a look at what services are running using the services.msc .

WINDOWS KEY + R
enter services.msc
Press the OK button    

You only need one MYSQL Server to server many databases, so you need to decide which one you want to use. If you decide to remove the non WAMPServer MySQL then don’t forget to back up your databases before removing the old MySQL

1. After the installation of Wamp go to System Tray or Notification Area as shown in the screen shot below and click on wamp icon.

2.Now click on www Directory,it will open a folder.

3.Delete all the files there and paste the HTML project which was working fine on local machine with out server.

In our case project is in folder \cakewebsitetemplate

4.To run the project go to System Tray or Notification Area->Click on Wamp icon>Click on Localhost .You will find the project folder there.

5.Click on the project i.e cakewebsitetemplate

Congrats,Your Static website is running now on WampServer.

Steps To Install WordPress on Wamp Server

WordPress is an free and open source blogging and CMS tool. WordPress is easy to manage and at the same time, a very powerful tool. One can easily extend the functionality of WordPress by installing plugins. It is estimated that 15% of the present websites are built on WordPress. To your surprise, WPWebHost is also built on WordPress.
WampServer is an open source web development platform on Windows. It allows you to create web applications with Apache2, PHP and a MySQL database.WampServer consists these software: Apache, MySQL and PHP/phpMyAdmin.

Why to install WordPress on WampServer?

WordPress is a popular choice today for people to create websites because of its user-friendliness and powerful features. But, Installing WordPress on your hosting directly and getting along with it can be a tough process. Also, you need to test your website, theme, etc to rest assure that it will not crash on the live server. So, to do this task, we setup a WampServer (which has all the basic requirements to install Worpdress), install WordPress on WampServer and then test our website before its final launch. Also, you get hand-to-hand experience with WordPress.

1~ Download setup files

  1. Download ‘WampServer’ from its download page: http://www.wampserver.com/en/#download-wrapper
  2. Download ‘Worpdress’ from its download page: https://wordpress.org/download/

2~ Install WampServer

Lets install WampServer on your Windows. Just follow the simple six steps visual procedure:
(Though, WampServer 3.0.6 was used for this tutorial, you will find it helpful for any version of WampServer.)
NOTE: I will suggest not to change the names I’ve used in the tutorial, else you can find yourself in trouble. Please only change names if you’re sure you can keep up with the changes.

1. Start the setup by opening the file you downloaded in step 1 of downloading setup files.

2. Select to Accept the agreement and Click ‘Next’ button.

3. Select your installation folder and click ‘Next’. I will recommend you to leave it as it is.

4.Click ‘Next’ to complete the installation

5.At the last screen click on Finish to complete the installation.

What is HAR File And How To Generate HAR File

What is HAR file?

The HAR file format is an evolving standard and the information contained within it is both flexible and extensible. You can expect a HAR file to include a breakdown of timings including:

  1. How long it takes to fetch DNS information
  2. How long each object takes to be requested
  3. How long it takes to connect to the server
  4. How long it takes to transfer assets from the server to the browser of each object

The data is stored as a JSON document and extracting meaning from the low-level data is not always easy. But with practice a HAR file can quickly help you identify the key performance problems with a web page, letting you efficiently target your development efforts at areas of your site that will deliver the greatest results.

How to get a HAR file

As HAR files are still an evolving format, support can be patchy and it may take some work to get your HAR file. High quality monitoring services will collect the HAR data for each sample they take. Automated testing tools can be tailored to get HAR files.

It is possible to use Firefox, Firebug, and NetExport together to generate a HAR file for a specific URL. That said, if you are using a modern browser it can generate a waterfall diagram, without the need to capture the HAR file as an interim representation, and this provides most of the information you will need in an instantly available view.

How to generate a HAR file in Chrome

  1. Start by opening Google Chrome. If you do not have Google Chrome and you are free to install additional programs, please download Google Chrome and install it.
  2. In Chrome, go to the page within Box where you are experiencing trouble
  3. Select the Chrome menu (⋮) at the top-right of your browser window, then select Tools > Developer Tools.
  4. The Developer Tools will open as a docked panel at the side or bottom of Chrome. Click on the Network tab.
  5. Select the option Preserve log
  6. The recording should autostart and you will see a red circle at the top left of the Network tab. If not, click the black circle, to start recording activity in your browser.
  7. Refresh the Box page you are on. The goal is to reproduce the problem you’ve been experiencing while Google Chrome is recording activity.
  8. Once you’ve encountered the problem successfully while recording, right-click within the Network tab and click Save as HAR with Content to save a copy of the activity that you recorded.
  9. Save the HAR file somewhere convenient.
  10. Now click the Console tab and right-click anywhere in the console log. Select the popup option “Save as…” and name the log file: Chrome-console.log
  11. Close the developer panel and you’re done! Please attach the HAR file and the Chrome-console.log to your email share to the IT person to use it for troubleshooting.

Visualizing a HAR file

As the file is in a JSON format, this is relatively easy to process with software, but it can be difficult for us humans to visualize. Here are three options that will create visualizations of HAR files:

  1. softwareishard.com. With this site you can simply paste your HAR File into the field and it will generate a report.
  2. Your monitoring service. This should provide a visualization of your page loads for each sample they take. Compare your load times from different geographic locations to get a broader view of your customers’ experience.
  3. Developer tools for browsers. I developed my first pass of web pages in Chrome. The Network Tab of the developer tools shows the webpage waterfall. Its easy availability makes it a great tool to work with.

Additional information is that yslow can be run from the command line and given a HAR file. You can include this as part of your automated regression testing to ensure your most recent changes are not degrading your websites behavior.