How to inspect elements in mac
An integral part of a web designer, a web developer, and a web tester’s work revolves around testing elements on the web application. For someone unaware of the inspector’s strengths, the first thing that would come to your mind to initiate testing is sharing the code. But the next thing you know, you are restricted from doing such a task as the source is confidential and should not be shared with people other than those related to the development team of the same project.
Browser developers have known this problem and have addressed the solution in their products through the web inspector. No matter which browser or browser engine you use in the world today, it will always ship with a web inspector. For developers and testers, a web inspector may be used hundreds of times a day to analyze the elements on a web page. In this post, to highlight the importance and usage of web inspector, we will focus primarily on the Mac operating system. Moreover, we will discuss a few methods that will help you inspect elements on a mac and why this post would help you in web testing even if you operate a Windows-based system.
Table Of Contents
- 1 Importance of inspecting elements on a browser?
- 2 How to inspect elements on Mac
- 3 Conclusion
Importance of inspecting elements on a browser?
A web inspector is used to inspect elements by almost all the teams associated with a project. However, their main aim could be different depending on their expertise and the inspector’s versatility helps achieve that. The following scenarios could be seen as important aspects of the inspector’s work.
Analyze element values on a web page
One of the most important objectives of using the web inspector is to locate an element and analyze its values. For example, observe the following image:
Notice the right half in this image where the values of the color associated with the variables are defined. This is an important feature to synchronize our used colors with the ones decided by the team and prepared by the designers. It saves us the trouble of searching all the values in multiple files of source code with each code file extending thousands of lines of code.
Apart from checking the values of the elements on a web page, we also use web inspector in many other fields such as analyzing the network traffic, page load time, network latency, and much more. One of the most important parts here is analyzing the flow of the requests (especially AJAX) and JS variables etc before the final render happens on the screen. Since we just see the final value in the UI for JS, what kind of changes it went through can be seen through inspecting elements.
For this, we popularly use the concept of breakpoints as shown in the following images:
The breakpoint stops the flow of a program and lets the tester and developer analyze the values at that point in time.
As mentioned in the first point of verifying values of variables we can guess the time we save when we use inspector instead of searching in the code base. Since the code base is large and contains multiple files, using an inspector will hardly take one minute for the same task.
Edit HTML from within a browser
A web inspector helps us in editing the HTML from within the browser. So the step-wise process that would be as follows:
- Check the render on the browser.
- Change value in the HTML code.
- Save and navigate to the browser.
- Reload and check the render again.
- If not satisfied, repeat the process.
Is then reduced to:
- Check the render on the browser.
- Edit the HTML within the browser.
- If not satisfied, keep changing values in HTML.
- Change the source code only after you are satisfied.
This way we are saved from repeatedly changing source code and checking the final output again and again.
The following image shows a developer editing an HTML value from the web inspector:
In the above image, the highlighted box is being edited by the developer. This can be achieved by double-clicking any element on the source code. Once you edit the value, press enter and the effect can be seen instantly on the web page.
Easier to use for people from different teams
A good practical use case I encountered while working on a project with multiple teams is that inspecting elements is the easiest way for all of them. Designers can quickly assess the colors and verify whether they are correctly rendered or not. Business analysts can also quickly right-click and inspect to check whether client requirements are satisfied or not. Technical or non-technical, any type of team can easily use the web inspector and accomplish their required task which is a major benefit of using this feature on a browser.
How to inspect elements on Mac
If you are someone who wants to test your elements on a macOS device, this section will help to get you through it. Whether you own a Mac device or not, it doesn’t matter when you are a developer or a web tester. The reason is that cross-browser testing not only wants you to test on a single browser but different browsers on an operating system with their different versions. You may also need to consider the resolution on each of the combinations so that you are always sure what you are sending to an end-user.
In this section, we will consider three popular options that you will have when you start testing your web applications on a Mac device. You can choose whichever you feel to be the best among these. However, if you need to know specifically about Google Chrome, we have a dedicated post for you with various methods.
Inspect elements on mac using physical machines
Using a physical machine is probably the first thing that will come to mind when we need to test a web application. How easy it is to just open a browser, enter a website, right-click and start inspecting. Right? This is probably the fastest method among all but is definitely not the most preferred one.
The issue here is the limitations of physical machines. Whether we work on our personal system or the machine issued to us through the organization, we are generally authorized to work on a single or sometimes a couple of machines only. Now let’s say I want to inspect elements on macOS Monterey with Google Chrome version 102. It can be easily done without any help.
As a next step, now we need to test the same app on Google Chrome 98 on the same macOS version. So, here maybe we can install a different browser version for now.
Next, we need to test with macOS Catalina and Google Chrome 102. Can we really re-install the OS version now on our single machine? What about when we need to test on macOS Mojave?
It is easy to notice here that inspecting elements on a mac using physical systems would be very time-consuming and tiresome. Installing and re-installing everything probably hundreds of time is not a practical method to follow. Maybe we can refine this method and see if it suits our needs.
Inspect elements on mac using virtual environments
A better option than choosing to use physical machines is through a virtual machine. A virtual machine is an operating system that does not exist as a standalone entity but works with the help of another operating system.
For example, let say I need to use macOS for testing but I work on Windows OS. Or I work on a particular macOS while testing requires a different macOS version. So, I can create a virtual environment on my Windows PC (or different macOS PC) and install the required macOS virtually. It does give an impression that you are working on the installed operating system as it works exactly how it would when installed.
The following image is from Oracle VM Box that shows Linux version installed virtually on the PC:
The benefit of using a virtual environment for inspecting elements on a mac is that you can install and reinstall operating system versions without ever affecting the primary OS. It is easier and much faster than doing the same thing on a physical system.
On the other side, the demerit of using a virtual machine for inspecting elements on a mac is that it is a “virtual” environment. This means it is working on top of the primary OS and therefore cannot access the kernel as a primary OS would. On top of it, virtual machines do not get access to complete RAM and HDD storage. To preserve CPU cycles and OS freezing situations, virtual machines are required to declare the memory they are allowed to use.
On an 8GB system, you can allow 4GB of space to use for virtually installed macOS. Hence, you will never get the idea of the parameter values with respect to your web application for an 8GB system.
Finally, even if you manage to release one version by installing and reinstalling operating system versions, browsers, and their versions, I am quite sure that you won’t be able to do the same for another version. And then another one a few days later. No doubt that using virtual environments for inspecting elements on a mac is the cheapest option (probably free) but there are hidden costs included. The cost is your time and that puts a negative effect on the testing outputs.
Inspect elements on mac using cloud machines
When we have a huge amount of data and have no space on our personal system or are scared of losing it accidentally, we turn towards cloud services such as Google Drive or Microsoft Onedrive. When we need to compute large computations quickly that would take much more time on physical systems, we turn to cloud services such as Amazon’s AWS or Microsoft’s Azure. Following the same trend, when we need too many machines with different browsers and their versions, what should we do? Definitely, in my opinion, we should turn towards the cloud.
Cloud-based machines are built and maintained by people other than your organization. An organization invests in the infrastructure to provide all the devices with browsers installed in the system already. They have high-speed computers and a robust setup to meet all your needs for web app testing such as inspecting elements on a mac device.
One such platform available on the cloud is Testsigma. The platform provides browsers and operating systems already installed onto their systems (real systems!). All you need to do as a tester is to select the browser, its version, macOS version, and just press a button to launch the web app on this specification. As simple as that.
Apart from this infrastructure setup, online cloud-based tools are also efficient in providing reports and analyses from your tests. So in the end you can analyze your tests (if your aim is also automation). For web inspector though, you might not need reports and just live testing is enough.
It is a recommended option to use a cloud tool such as Testsigma to save your valuable time that can be spent on other important tasks rather than installing the browsers etc.
In this post, we tried to simplify a very popular yet simple-to-use process of inspecting elements on a web browser. Since we know that a user may or may not have a mac operating system, we also understand that this block should not prevent you from testing your web application on a mac operating system. After all, the web application will bear the responsibility of representing your brand to the world ahead and making your brand’s cool logo famous.
The post highlighted three methods to inspect elements on a mac device to evaluate, analyze and edit elements of a web page. If your requirements are restricted and you already know that the users will be using just macOS XYZ version and ABC browser with CDE version, it is best to choose the physical systems. However, this is a very rare case. In most of the cases, your audience will be huge and the end-user’s system specifications will be unpredictable. So, except for the case we discussed above, we recommend using online tools for your testing tasks. To give you a reference, we have mentioned Testsigma as a good tool to start your journey with. We hope it will stand to your expectations. For any feedback and suggestions, let us know in the comment section. Thank you for giving this post your valuable time.