How to Add Another User Agent to the Safari User Agent Switcher Menu

I’ve been doing a lot of testing and development on various platform. And it is difficult to debug the javascript, css and layout of the webpage without seeing the code in action.

Safari has a User Agent switcher under the ‘Develop’ menu. The Develop Menu can be enabled in Preferences > Advanced. It allows you to test your layout on Safari, IE, Firefox, Chrome, and Opera for both Mac and Windows browsers, and iOS devices.

But some User Agents are not on the list. Luckily, it is easy to add other User Agents since Safari uses a simple XML file that can be edited on test editors or GUI.

The method that we are going to use is by editing it thru GUI.

Run the following command:

sudo nano /Applications/Safari.app/Contents/Resources/UserAgents.plist 

Now, you can edit the file.

Add the following code:

	
	name
	Android
	version
	2.1
	platform
	Mac
	user-agent
	Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
	

Another way to edit the XML file is by copying the plist file to Documents folder or any desired location

cp /Applications/Safari.app/Contents/Resources/UserAgents.plist ~/Documents/ 

Open the file and paste the code as specified above.

Then copy the edited file back to Safari:

sudo cp ~/Documents/UserAgents.plist /Applications/Safari.app/Contents/Resources/UserAgents.plist

Now, if you switch to Android as your User Agent, you can see your layout and modify its css and components inline.

Test website on iPhone, Android and other Mobile Devices

You might be interested to check:

Leave a comment: