PerfMap is a front-end performance heatmap.
In this tutorial, you’ll learn how to setup the PerfMap bookmarklet on your Apple devices such as iPhone, iPad, and Mac.
We will need to create a bookmark and then go back and edit the bookmark to include the JavaScript code for the PerfMap bookmarklet. The steps that we will be following are similar to other tutorials on this site — only we will be inserting the code for PerfMap.
Install the PerfMap bookmarklet on the iPhone
We will complete the following steps via the iPhone.
Prepare your Apple iPhone & open this tutorial in mobile Safari
- From your iPhone, go to “Settings” and tap on “Safari.” Set Block Cookies to “Always Allow.” Tap “Advanced” and set JavaScript to “ON.”
- Next, open the Safari app and open this current page (go to iosbookmarklets.com and search for “PerfMap” and go to this section of the tutorial for the iPhone).
- Now copy the code in the section (PerfMap bookmarklet code)
Create a temporary bookmark in mobile Safari
Next, tap on the share icon (square with arrow) at the bottom of your Safari page and tap “Add Bookmark.” Ensure that it will be saving to the “Favorites” for the location and then tap “Save.”
Update the temporary bookmark with the code for the bookmarklet
- Now tap on the bookmark icon (open book) to pull up your bookmarks. Tap on the “Favorites” folder. Then tap “Edit” in the corner of your screen.
- Tap the bookmark that you just created. Change the name to something of your choice – perhaps ‘PerfMap’ or ‘Run PerfMap’.
- Next, erase the URL shown and paste the bookmarklet code for PerfMap (press and hold, then release, then tap “Paste”).
- Tap “Favorites” located in the top left corner to go back. Tap “Done” located in the bottom corner. Then tap “Done” located in the top left corner to close the Favorites screen in Safari.
Those are all the steps! You’ve now installed the PerfMap bookmarklet on your Apple iPhone.
Install the PerfMap bookmarklet on the iPad
We will complete the following steps via the iPad.
Prepare your Apple iPad & open this tutorial in mobile Safari
- From your iPad, go to “Settings” and tap on “Safari.” Set Show Favorites Bar to “ON.” Set Block Cookies to “Always Allow.” Tap “Advanced” and set JavaScript to “ON.”
- Next, open the Safari app and open this current page (go to iosbookmarklets.com and search for “PerfMap” and go to this section of the tutorial for the iPad).
- Now copy the code in the section (PerfMap bookmarklet code)
Create a temporary bookmark in mobile Safari
Next, tap on the share icon (square with arrow) at the top of your Safari page and tap “Add Bookmark.” Ensure that it will be saving to the “Favorites” for the location and then tap “Save.”
Update the temporary bookmark with the code for the bookmarklet
- Now tap on the bookmark icon (open book) to pull up your bookmarks. Tap on the “Favorites” folder. Then tap “Edit” in the bottom corner.
- Tap the bookmark that you just created. Change the name to something of your choice – perhaps ‘PerfMap’ or ‘Run PerfMap’.
- Next, erase the URL shown and paste the bookmarklet code for PerfMap (press and hold, then release, then tap “Paste”).
- Tap “Favorites” located in the top left corner to go back. Tap “Done” located in the bottom corner. Tap the bookmark icon to close the bookmarks sidebar.
Those are all the steps! You’ve now installed the PerfMap bookmarklet on your Apple iPad.
Install the PerfMap bookmarklet on the Mac
Drag the link below to your web browser’s bookmarks bar:
Note: the step above also works for other platforms such as PC.
Are you using iCloud on your Mac, iPad, and iPhone? If you are using Safari as your web browser on your Mac, then you could drag the link above to your Safari bookmarks bar (Favorites bar) and this will add the PerfMap bookmarklet to all of your iCloud-enabled devices.
PerfMap bookmarklet code
To copy the code below — press and hold on the code and then release; then adjust the blue overlay so it covers the entire code, and tap “Copy.”
javascript:(function(){var el=document.createElement('script');el.src='https://zeman.github.io/perfmap/perfmap.js';document.body.appendChild(el);})();
If you found this tutorial helpful, then please let us know in the comments and do share it with a friend.
Image credit: Github.com/zeman/perfmap
Bookmarklet code credit: https://github.com/zeman/perfmap
