All posts by brian

Bookmarklet: Copy Markdown Link

Here’s a simple bookmarklet that assembles the current browser page title and link into Markdown format.

To install, drag this link to your browser’s bookmark toolbar:
‘+document.title+’‘;window.prompt(‘Copy%20to%20clipboard:%20Ctrl+C,%20Enter’,text);void(0);”>Copy Bookmark Link

Here’s the source code on GitHub:

And here’s a screenshot of the dialog that appears:

Screenshot of Copy Markdown Link Bookmarklet

Screenshot of Copy Markdown Link Bookmarklet

This bookmarklet is very minimal and should should work in all browsers.

Capture Android Mobile Web Traffic With Fiddler

Example screenshot of Android mobile browser and Fiddler proxy

When doing web development on the desktop, you have the benefit of inspection and debugging tools available in modern browsers like Chrome, Firefox, Safari and Internet Explorer. Inspecting web traffic for page requests and API calls is relatively straightforward. Once you move over to mobile development, you miss a lot of those built-in tools. Luckily there are some good desktop network proxy tools which can make mobile traffic inspection possible again.

In this post I’ll walk through setting up an Android 4.x device with Fiddler running on a Windows PC. Fiddler is a powerful HTTP/HTTPS proxy utility that is pretty easy to set up and use for this type of analysis. And it’s free. (Mac users could use similar steps with the Charles web debugging proxy; it’s not free but does have a free trial and is relatively inexpensive.)

Once we have this set up, some typical use cases include:

  • Mobile web development or performance measurement
  • Mobile app development or debugging
  • Observing other apps on your phone to understand network connections being made or for security analysis

Prerequisites

As prerequisite, you should install Fiddler and be somewhat familiar with how to use it. If you haven’t used it before, check out the features tour on the Fiddler website.

The Android device should be on the same network as the Windows PC. The PC doesn’t have to be on Wi-Fi, as long as they can connect to each other. (If in doubt, trying pinging from the Windows PC to the Android device to verify the local network connection.)

Android device and Windows PC on same network

Android device (on Wi-Fi) and the Windows PC on the same network

Set up Fiddler

After Fiddler is installed, configure it to allow remote connections and to decrypt HTTPS traffic:

  1. Click menu Tools | Fiddler Options, then select the Connections tab
  2. Make note of the “Fiddler listens on” port (normally it’s 8888)
  3. Make sure the check box for “Allow remote computer to connect” is checked
  4. Switch to the HTTPS tab
  5. Make sure the check boxes for “Capture HTTPS Connects” and “Decrypt HTTPS traffic” are both checked
  6. Restart Fiddler
  7. Make note of the PC’s IP address
  8. Close non essential apps on the Windows PC (to minimize web traffic being routed through Fiddler)
Fiddler connection options

Fiddler connection options (click to enlarge)

Set up Android Networking

Now we’ll set up the Android device to connect to the Fiddler proxy. These instructions should work for most Android phones or tablets on OS 4.0 and newer. (If your device doesn’t work or needs slightly different steps, you can search Google for your-phone-model http proxy.)

  1. Tap on Settings, then Wi-Fi
  2. Find the network on which you’re connected (normally the first one listed), then tap and hold
  3. Choose Modify network from the pop-up
  4. Scroll down and enable “Show advanced options”
  5. Change “Proxy settings” to Manual
  6. Under “Proxy host name” enter the Windows PC IP address from above
  7. Under “Proxy port” enter the Fiddler port from above (usually 8888)
  8. Tap Save and wait a moment for the network to reconnect
Android network proxy settings

Android proxy settings (click to enlarge)

Google Chrome Settings

Added 2014-06-06: Thanks to Stack Overflow user comfreek who pointed out this issue with Chrome proxy settings.

On newer versions of Google Chrome for Android, there are new settings for Bandwidth Management. When bandwidth management is enabled (which I believe is the default), HTTP traffic will go through Google proxy servers rather than the customer HTTP proxy we are setting up here.

You’ll need to make sure bandwidth management is turned off:

  1. Launch Google Chrome
  2. Go to Settings, then under Advanced tap on Bandwidth management
  3. Turn off Preload webpages and Reduce data usage

Set up Android Networking

Now we’ll set up the Android device to connect to the Fiddler proxy. These instructions should work for most Android phones or tablets on OS 4.0 and newer. (If your device doesn’t work or needs slightly different steps, you can search Google for your-phone-model http proxy.)

  1. Tap on Settings, then Wi-Fi
  2. Find the network on which you’re connected (normally the first one listed), then tap and hold
  3. Choose Modify network from the pop-up
  4. Scroll down and enable “Show advanced options”
  5. Change “Proxy settings” to Manual
  6. Under “Proxy host name” enter the Windows PC IP address from above
  7. Under “Proxy port” enter the Fiddler port from above (usually 8888)
  8. Tap Save and wait a moment for the network to reconnect
Android network proxy settings

Android proxy settings (click to enlarge)

Web Browsing

On the Android device, bring up a browser like Chrome and visit a website like http://bing.com. If everything has been set up correctly, you should see the HTTP traffic flowing through Fiddler. You can click and inspect each of the network requests, for example the HTML page, CSS, JavaScript, and images.

Fiddler Bing.com capture example

Example capture of Bing mobile website through Fiddler

Now let’s try a website that forces HTTPS, for example https://wellsfargo.com. In this case the mobile browser is complaining that it can’t validate the SSL certificate from the server. This is accurate because we’re using Fiddler as a proxy and it’s generating its own SSL certificates for us on the fly. (This is what allows Fiddler to decrypt and inspect these HTTPS connections.) We’ll come back to this in a bit.

Caution: I recommend not choosing the “proceed anyway” option here. Mobile browsers tend to cache that choice for a long team, meaning that you won’t be warned about it again in the future.

Android Chrome browser warning about SSL certificate

Chrome browser warning about unverified SSL certificate

Install Fiddler Certificate to Android

As a final step to improve the debugging of secure HTTPS connections, we can install a Fiddler “root” certificate on the Android device. (Note: If your device does not already have a PIN or password, you will need to set one up before installing the certificate.)

Steps:

  1. On Android start the Chrome browser
  2. Navigate to http://ipv4.fiddler:8888/
  3. Tap on the link for the “Fiddler Root Certificate”
  4. Name the certificate “Fiddler” and install it (entering your PIN or password if prompted)

With this test certificate installed, you should now be able to visit SSL sites from the Android Chrome browser and not receive any certificate warnings. The network traffic should also be viewable in Fiddler. Good test sites are those which always force secure HTTPS connections, like the Wells Fargo mobile site at https://wellsfargo.com/.

Return to Normal Android Networking

When you’re done with your Android→Fiddler testing, remember to restore your normal Android network settings. Otherwise you may be confused later when none of your apps work :)

  1. Tap on Settings, then Wi-Fi
  2. Find the network on which you’re connected (should be the first one listed), then tap and hold
  3. Choose Modify network from the pop-up
  4. Scroll down and select (enable) “Show advanced options”
  5. Change “Proxy settings” to None
  6. Tap Save and wait a moment for the network to reconnect
  7. Go up a level in settings to Security
  8. Tap Trusted credentials, then select the User tab
  9. Tap on the Fiddler “Do not trust” certificate, then scroll down to remove it
  10. You may need to power cycle your device to get all apps to forget about the Fiddler certificate (e.g., the Chrome browser will continue to try to use it for a while)

Screencast: Importing HTML Tables into Excel

Importing table-formatted data from web pages is a very handy feature of Microsoft Excel, and probably not very well known. To demonstrate the steps, I made two short videos covering both Windows and Mac versions of Microsoft Excel:

Microsoft Excel – Importing HTML tables

Microsoft Excel for Mac – Importing HTML tables

Note: If you want to see my original screencasts for this technique, see this blog post from 2006: Microsoft Excel Web Queries (Screencast). Side note: I can’t believe that was 7 years ago :)

Top 7 Technical Podcasts

Modified Podcast Logo with My Headphones Photoshopped On

Here’s a list of all the technical/startup podcasts I’m currently listening to – my own personal “top 7”. I have a longer commute now and whether in the car or the train, I’ve had lots of time to keep up. I’ve branched out and tried a LOT of different shows but these are the ones I’ve stuck with.

I can also highly recommend the Downcast podcast app for iPhones – see also my Downcast review from earlier this year. The app has continuous updates and improvements, and is rock solid.

Without further delay, here are my top technical podcasts:

Product People [RSS]
“A podcast focused on great products and the people who make them”, hosted by Justin Jackson (@mijustin). I’m really enjoying the variety of topics and interviewees on this show. Justin does a great job as interviewer and you can tell his passion for these people and their projects. A final bonus: many of the shows are split into two parts to keep their lengths reasonable.

Hanselminutes [RSS]
Probably my all-time favorite podcast. Scott Hanselman (@shanselman) gets a broad variety of guests to appear, and always keeps it interesting. Scott also has a ton of respect for the listener – when guests mention buzzwords or new technical concepts, he always asks the right questions to help keep the audience up to speed. His shows are also always a reasonable length with no extra chit-chat, just the content.

Startups For the Rest of Us [RSS]
This is probably the first “startup” podcast I started following. Hosts Mike Taber (@singlefounder) and Rob Walling (@robwalling) do a great job each week talking about their own startup experiences, with a focus on bootstrapping. Good mix of stories/ideas/interviews along with a healthy dose of answering listener questions.

Kalzumeus Software » podcasts [RSS]
Patrick McKenzie (@patio11) is an infrequent podcaster, but always delivers great content. Patrick shares his experiences running SaaS businesses and in particular trying to educate startups on the value and techniques of proper marketing.

Giant Robots Smashing into other Giant Robots [RSS]
Produced by Thoughbot and hosted by Ben Orenstein (r00k), Giant Robots covers a broad range of software design, development, and business. The guests are always great, and sometimes include internal Thoughbot team members. Ben is a great interviewer, and his enthusiasm shows.

.NET Rocks! [RSS]
I think this is first podcast I started listening to, probably back in 2003 or 2004. (I think I started by burning CD-Rs and listening in my car.) Carl Franklin @carlfranklin) and Richard Campbell (@richcampbell) have been at this for a LONG time, with over 900 episodes recorded since they started in 2002. The show covers all aspects of the .NET platform and related technologies and Carl and Richard make a great pair.

The Tablet Show [RSS]
Also by Carl Franklin and Richard Campbell, The Tablet Show started in 2011 to focus on mobile and tablet software technologies. It’s a good complement to .NET Rocks and branches out more often away from strictly the .NET world.

Twitter Followers in CSV Format

Several months ago I shared my script for exporting Twitter friends into CSV format, suitable for importing into Excel or other spreadsheet programs. This week I made some slight improvements to my gist and discovered that someone else had forked it to create a version that exports your followers as well.

The modified version for finding your followers is available on GitHub (jimbohne/5933586), and embedded below. Follow the installation steps if you want to try it yourself.