Skip to content

Files

Latest commit

 

History

History
536 lines (344 loc) · 26.2 KB

lt-browser-2.md

File metadata and controls

536 lines (344 loc) · 26.2 KB
id title hide_title sidebar_label description keywords url site_name slug
lt-browser-two
LT Browser 2.0 - Test Website For Responsiveness Easily
true
Getting Started With LT Browser 2.0
Built-on Chromium, LT Browser 2.0 enables you test website's responsiveness on over 50+ device viewports. Open your website in the LT Browser and perform live testing now!
responsive test
mobile friendly tester
Responsiveness checker
LT Browser
Browser for developers
Best Browser for developers
Responsive testing tool
Test Website For Responsiveness
website responsive test
responsive checker
mobile responsive test
test website on different devices
responsive website checker
responsive design checker
test website on mobile devices online
responsive design test
test website in different screen sizes
view website on different devices
Responsive Testing Tool
responsive web design tester
mobile responsive checker
responsive testing simulator
site responsive test
responsive web test
responsive design testing across devices
rwd tester
view site on different devices
website mobile responsive test
check website on different devices
see website on different devices
mobile rwd tester
best responsive testing tools
responsive web design testing tool
Responsive site checker
Responsive Testing Software
how to check responsive website in chrome
how to check responsive website offline
online device testing
LambdaTest
lt-browser-2/
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "LambdaTest", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "LT Browser 2.0", "item": "https://www.lambdatest.com/support/docs/lt-browser-2/" }] }) }} ></script>

Getting Started With LT Browser 2.0

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 6 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.

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/device_panel.png').default} alt="Open the LT Browser" className="doc_img" width="1360" height="719"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/test_url.png').default} alt="view screen" className="doc_img img_center" width="703" height="293"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/launched_web.png').default} alt="view screen" className="doc_img" width="1365" height="727"/>

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 6 device viewports at a time.

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/add_device1.png').default} alt="view screen" className="doc_img" width="819" height="392"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/add_device2.png').default} alt="view screen" className="doc_img" width="1366" height="768"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/add_device3.png').default} alt="view screen" className="doc_img" width="1366" height="721"/>

Rotating Device

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/rotate.gif').default} alt="view screen" className="doc_img img_center" width="1366" height="721"/>

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 .

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/add_device1.png').default} alt="view screen" className="doc_img" width="819" height="392"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/add_new_device.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

  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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/custom_device_details.png').default} alt="view screen" className="doc_img" width="1366" height="768"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/custom_device1.png').default} alt="view screen" className="doc_img" width="1366" height="768"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/search_bar.png').default} alt="view screen" className="doc_img" width="1366" height="768"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/create_custom_device.png').default} alt="view screen" className="doc_img" width="1366" height="720"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/perf_report.png').default} alt="view screen" className="doc_img" width="1366" height="720"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/pr.png').default} alt="view screen" className="doc_img" width="959" height="449"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/p_metrics.png').default} alt="view screen" className="doc_img" width="946" height="645"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/diagonistics.png').default} alt="view screen" className="doc_img" width="848" height="570"/>

Runtime Settings

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/r_settings.png').default} alt="view screen" className="doc_img" width="579" height="192"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/share_perf_report.png').default} alt="view screen" className="doc_img" width="1028" height="502"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/network_icon.png').default} alt="view screen" className="doc_img" width="1028" height="502"/>

  1. Select the network environment from the network list.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/select_network.png').default} alt="view screen" className="doc_img" width="512" height="597"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/sync_device.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/scroll_sync.gif').default} alt="view screen" className="doc_img img_center" width="600" height="319"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/enable_fps.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

  1. Click on the Camera icon.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/camera.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/capture_fps.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/save_fps.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/report.png').default} alt="view screen" className="doc_img" width="595" height="304"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/mark_reports.png').default} alt="view screen" className="doc_img" width="1366" height="718"/>

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 directly from the Chrome web store.

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/select_extension.png').default} alt="dev tools" className="doc_img" width="1361" height="721"/>

It will guide you to the below screen.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/ext_page.png').default} alt="dev tools" className="doc_img" width="1361" height="721"/>

  1. You can either search for your favorite Chrome extensions or 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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/add_ext.png').default} alt="dev tools" className="doc_img" width="1361" height="721"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/inst_ext.png').default} alt="dev tools" className="doc_img" width="1361" height="721"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/camera.png').default} alt="view screen" className="doc_img" width="1366" height="722"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/mark_as_bug.png').default} alt="view screen" className="doc_img" width="1366" height="716"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/more_integrations.png').default} alt="view screen" className="doc_img" width="1366" height="716"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/arrow.png').default} alt="view screen" className="doc_img" width="1055" height="595"/>

Saving The Screenshot

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/save.png').default} alt="view screen" className="doc_img" width="1055" height="595"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/share_icon.png').default} alt="share screenshot" className="doc_img" width="998" height="585"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/email.png').default} alt="share screenshot" className="doc_img" width="564" height="416"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/shareable_link.png').default} alt="share screenshot" className="doc_img" width="564" height="416"/>

Recording Video Of A Test Session

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/recorder.png').default} alt="share screenshot" className="doc_img" width="1366" height="718"/>

  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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/share_screen.png').default} alt="share screenshot" className="doc_img" width="1366" height="720"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/video_timer.png').default} alt="video recording" className="doc_img" width="1366" height="722"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/access_media.png').default} alt="media" className="doc_img" width="1356" height="699"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/image.png').default} alt="Image editor" className="doc_img" width="1353" height="722"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/video_tab.png').default} alt="switch tab" className="doc_img" width="1366" height="722"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/local_path.png').default} alt="htdocs" className="doc_img" width="886" height="624"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/local_testing.png').default} alt="htdocs" className="doc_img" width="886" height="624"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/test_behind.png').default} alt="page behind login" className="doc_img" width="1366" height="724"/>

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.

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/debug.png').default} alt="debug button" className="doc_img" width="1357" height="723"/>

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

<img loading="lazy" src={require('../assets/images/lt-browser-chromium/debugging.png').default} alt="dev tools" className="doc_img" width="1361" height="721"/>

Keyboard Shortcuts

Here are the keyboard shortcuts for LT Browser 2.0.

macOS

SHORTCUT PURPOSE
Command+Z Undo
Shift+Command+Z Redo
Command+X Cut
Command+C Copy
Command+V Paste
Command+A Select All
Ctrl+Command+F Toggle Full Screen
Command+M Minimize
Command+Q Quit
Command+T Opens a new tab.
Command+W Close the active tab.
Command+Shift+M Navigate to Media page.
Command+Shift+H Navigate to Home page
[ Expand and collapse the sidebar
Shift+P Viewing the performance report
Command+Shift+R Replacing or adding a right device
Command+Shift+D Removing the right device

Windows & Linux

SHORTCUT PURPOSE
Ctrl+R Reload
Ctrl+Z Undo
F11 Toggle Full Screen
Alt+F4 Close
Ctrl+X Cut
Ctrl+C Copy
Ctrl+V Paste
Ctrl+T Opens a new tab.
Ctrl+W Close the active tab.
Ctrl+M Minimize.
Ctrl+Shift+M Navigate to the Media page.
Ctrl+Shift+H Navigate to the Home page.
Shift+Ctrl+Z Redo
Ctrl+Shift+D Removing the right device
Ctrl+A Select All
[ Expand and collapse the sidebar
Alt+P Viewing the performance report
Ctrl+Shift+R Replacing or adding a right device