Skip to main content

Getting Started With LT Browser 2.0 (Beta)


LT Browser 2.0 is a Chromium-based mobile-friendly browser that enables web developers to build, test and debug their mobile websites for responsiveness across a wide range of 50+ pre-installed device viewports, including mobile, tablet, desktop and laptop.

The new LT Browser 2.0 boasts enhanced performance and several features that make it easier for you to create responsive websites for device viewports of all sizes.

The following new features are available in LT Browser 2.0:

  • Based on latest version of Chromium.
  • More clear and attractive UI.
  • Interact and test with 4 devices simultaneously.
  • Dedicated DevTools for different viewports.
  • Test with unlimited custom device viewports.
  • Generate and share multiple error reports.
  • Use Chromium settings.
  • Install Chrome extensions.
  • Unlimited browser tabs to launch device viewports.
  • Record with entire screen or browser tab.
Note:

LT Browser 2.0 is currently available in a beta version.

To get started with LT Browser 2.0, download the below executable file based on your operating system.

Running Your First Responsive Test


  1. Open the LT Browser 2.0 and select your preferred device from the left device panel. By default, LT Browser 2.0 opens up with two viewports.
Open the LT Browser

  1. Provide the testing URL in the address bar, and then press Enter.
view screen

  1. It will launch the website on the selected device viewport.
view screen

Adding More Devices


You can monitor different devices side by side by adding a device on the view screen. With LT Browser 2.0, you can interact with 4 device viewports at a time.

  1. To add more viewports, click + Add Devices.
view screen

  1. From the pop-up box, select your desired viewport that you want to test side-by-side and Click ADD DEVICES
view screen

You can now find a new device viewport on the view screen. This will allow you to test responsive web design on four different viewport sizes.

view screen

Rotating Device


You can rotate devices from Portrait To Landscape view or vice versa. To rotate device, click on the rotate icon.

view screen

Adding A Custom Device


If a device does not match the viewport or device pixel ratio of your requirement, you can add a custom device viewport. With LT Browser 2.0, you can add unlimited custom viewports.

  1. To add custom viewport, click + Add Devices .
view screen

  1. Select the Custom tab and click + New Device.
view screen

  1. A pop-up box will appear where you need to specify the following viewport details.
  • Device Name
  • View Port Specifications (Width and Height)
  • Device Pixel Ratio
  • User Agent String
  • Device Platform

After entering the viewport details, click ADD DEVICE

view screen

It will add your custom device based on the provided viewport details.

view screen

Searching For A Specific Device


LT Browser 2.0 includes a search bar at the top-left of the screen to enable you to instantly locate any device from the device panel. Enter the brand of the device, select a device from the list and it will appear instantly on-screen.

view screen

If you search for a device viewport which is not yet listed in the LT Browser 2.0 device panel, you will see Create your own device option that allows you to add your own custom device.

view screen

Generating Performance Report


With LT Browser 2.0, you can view the performance report of your page instantly powered by Google Lighthouse. The Performance Report allows you to get a holistic view of your website or web app and gain actionable insights to improve your mobile web experience.

With Performance Report you can view:

  • Desktop and Mobile Score

  • Performance Metrics

  • Runtime Settings

  1. To generate a performance report, enter the desired URL in the address bar and press Enter.

  2. Click on Performance tab in the header.

view screen

It will take a few seconds for the Performance Report to generate.

Desktop and Mobile Score

The Desktop and Mobile Score contains the universal score of the desktop and mobile scores. The score has three fields - Poor, Average, and Optimum.

view screen

Performance Metrics

You can view Desktop and Mobile Score based on different parameters like Accessibility, Best Practices, SEO, and Progressive Web App (PWA). The Opportunities and Diagnostics section help you with guidelines to load your page faster.

view screen

Towards the bottom, you can find the device resolution used to generate performance report along with the loading time. Also, view the DOM and Browser processing duration of your web page. These timestamps will change as per your choice of network simulation.

view screen

Runtime Settings

In Runtime Settings, you'll find the URL of the entered website, time, and date.

view screen

You can also share your performance report with your team members via e-mail or a shareable link. To share you report, click the Share icon.

view screen

Network Throttling


LT Browser 2.0 allows you to test your mobile website view over different types of network connections, including fast 3G, slow 3G, online and even offline. You can change your network profile to test its functionality when exposed to different network environments.

  1. To test your website's performance over different network environments, click the Network Throttling icon.
view screen

  1. Select the network environment from the network list.
view screen

Once you are done with selecting the network, you can test your mobile view of your website over the selected network.

Sync Devices


Sync Devices synchronize your scrolls across multiple devices. It lets you scroll through different devices so that scrolling on one device will scroll the same amount on another device. Using Sync Devices, you can compare your website side-by-side over other devices via mirrored interactions.

Using LT Browser 2.0, you can compare your website view on multiple device viewports.

Navigate to the Settings icon and click Sync Devices.

view screen

You can now compare your website view side-by-side on different viewports.

view screen

Capturing Full-Page Screenshots Of Websites


With Full Page Screenshot feature, capture full-page screenshots of your website's long content and compare it across multiple devices.

  1. Navigate to the Settings icon and click Full Page Screenshot.
view screen

  1. Click on the Camera icon.
view screen

Upon clicking on the Screenshot icon, you will receive a prompt message stating Full Page screenshot is in progress.

view screen

  1. Once the screenshots are captured, it will guide you to the page where you can download your full-page screenshots into the LT Brower 2.0 by pressing the 'Save' button or you can download your screenshots into your local machine by clicking on the 'Arrow' button.
view screen

To save screenshots on local system, enable Save Media on Cloud option from the Settings icon on the top-right.

Viewing Error Reports


Error report lets you check for web-page errors, such as services that fail to load, and alerts you when the issue occurs. With LT Browser 2.0, you can view multiple errors across different device viewports.

  1. To view error reports for websites, launch your website on your preferred viewports.

  2. If your website has errors, you will see a red error icon below the viewport of your device. Click on the error icon to view the error reports.

view screen

LT Browser 2.0 allows you to mark errors in an error report as bugs. To do this, select the error that you want to mark and click Mark as Bug.

view screen

You can also share error reports with your teammates and colleagues by clicking on Share icon.

Installing Chrome Extensions


LT Browser 2.0 enables you to install your favorite Chrome extensions through CRX file.

  1. Navigate to More tools > Extensions from the top-right of the LT Browser 2.0.
dev tools

It will guide you to the below screen.

dev tools

  1. Drag and drop the CRX file from your local system to the Extensions page.

  2. Once you drop the file, click Add extension to confirm the installation.

dev tools

The Chrome extension you just installed will now appear in the LT Browser 2.0.

dev tools

Marking And Sharing Bugs


To mark bugs, enable Enable Mark as Bug option from the Settings icon on the top-right.

While performing responsive testing, you can mark any website issues as bugs.

  1. If you come across an issue, click on the Camera icon to capture the screenshot of your mobile website.
view screen

In case you want to capture full-page screenshots, enable Full Page Screenshot option from the Settings icon on the top-right.

  1. Use the in-built annotation tool bar to mark any issues, bugs and tasks on a web page. Then, click Mark as Bug.
view screen

When you click the Mark as Bug, you'll be presented with a list of LambdaTest integrations. If your favorite integration isn't presented, then you can click More Integrations to view all available LambdaTest integrations.

view screen

Once you integrate the LT Browser 2.0 with a third-party tools like Jira, GitLab, GitHub, and more, you can log bugs directly from the LT Browser 2.0 to your project.

Sharing Bugs


To make it easier to share bugs across your teams, LT Browser 2.0 offer multiple ways to share a screenshot of the logged issues.

Downloading The Screenshot

You can download the highlighted screenshot in your system, then share it with your team through email or instant messaging.

view screen

Saving The Screenshot

After you capture a screenshot, you can save it directly on the LT Browser 2.0 by clicking Save.

view screen

This will save your screenshot in the Media gallery. You can access this gallery by clicking the Media tab in the header.

Sharing The Screenshot To Multiple Email IDs

Click on the Share icon.

share screenshot

You can share a bug directly to your teammate's email ID. You can include an optional note in order to help your colleague understand the nature of the bug.

share screenshot

You can also copy the shareable link for sharing your bugs by clicking on Get Shareable Link.

share screenshot

Recording Video Of A Test Session


  1. Open your website in any device viewport and click the Video recorder icon.
share screenshot

  1. It will ask you to select how you want to record from two options: Entire Screen or LT Browser Tab. Select either of the option and click Share.
share screenshot

A timer will appear at the top of the screen when you begin a live testing session. The timer continues to run unless you stop the recording by clicking the same Video Recording icon or Stop sharing.

video recording

Accessing Media


To view your screen captures and recordings, visit the Media tab. In the Media section, you can find all your screenshots and video recordings.

media

Media has two tabs: Images and Videos where you can download, share, rename or delete any image or video from the Media section.

Image editor

The Videos tab shows full recordings of your live interactions from different test sessions.

switch tab

Testing Locally Hosted Websites Or Web Apps


To test your locally hosted web apps or websites, you need to provide the localhost URL in the address bar of LT Browser 2.0.

The following screenshot shows Apache server running on a system, hosting an image located at XAMPP's htdocs folder.

htdocs

Now open the localhost in the LT Browser 2.0 and add the file path you want to test. In this case, the localhost URL will be: http://localhost/home_banner.webp.

The locally-hosted image will be rendered on your selected device viewports.

htdocs

Testing Web Pages Behind Login


LT Browser 2.0 aims to provide responsive testing and a live-interactive testing experience. You can load a website, login to the LT Browser 2.0 web application, and start testing your pages.

Following screenshot shows LambdaTest web-application that is captured after logging in from the LambdaTest website.

page behind login

Debugging Your Websites


With LT Browser 2.0, you can see how your responsive design looks over 50+ device viewports and debug web applications with dedicated DevTools for different device viewports to determine the root cause of a browser or UI bug.

To debug your website, click on the debug icon of the respective viewport.

debug button

Once you click on the debug icon, you can access the developer tools for mobile view debugging.

dev tools

Keyboard Shortcuts


Here are the keyboard shortcuts for LT Browser 2.0.

macOS

SHORTCUTPURPOSE
Command+ZUndo
Shift+Command+ZRedo
Command+XCut
Command+CCopy
Command+VPaste
Command+ASelect All
Ctrl+Command+FToggle Full Screen
Command+MMinimize
Command+QQuit
Command+TOpens a new tab.
Command+WClose the active tab.
Command+Shift+MNavigate to Media page.
Command+Shift+HNavigate to Home page
[Expand and collapse the sidebar
Shift+PViewing the performance report
Command+Shift+RReplacing or adding a right device
Command+Shift+DRemoving the right device

Windows & Linux

SHORTCUTPURPOSE
Ctrl+RReload
Ctrl+ZUndo
F11Toggle Full Screen
Alt+F4Close
Ctrl+XCut
Ctrl+CCopy
Ctrl+VPaste
Ctrl+TOpens a new tab.
Ctrl+WClose the active tab.
Ctrl+MMinimize.
Ctrl+Shift+MNavigate to the Media page.
Ctrl+Shift+HNavigate to the Home page.
Shift+Ctrl+ZRedo
Ctrl+Shift+DRemoving the right device
Ctrl+ASelect All
[Expand and collapse the sidebar
Alt+PViewing the performance report
Ctrl+Shift+RReplacing or adding a right device