What if we also want to test a right-to-left locale, like Arabic? In that case, all we need to do is click the Manage button in the Sensors pane and enter the details for our custom location (if it doesn’t already exist). For example, if we select Berlin from the dropdown list and manually refresh the page, we should see the text update to German because the locale for the Berlin option is set to de-DE by default: In Chrome dev tools, the Sensors pane mocks this API, allowing you to simulate a specific device configuration so that when the page tries to read that information, it uses the mocked data rather than the real device data.Īdditionally, Chrome’s Sensors pane allows us to switch locales. Press Enter, and you should see a new pane pop up that looks like this:Īs the name suggests, the Sensors web API allows a web site or app to leverage a device’s built-in sensors for things like gyroscopes, lighting, accelerometers, geolocation, and more. Chrome has a command palette that you can invoke using Cmd+Shift+P or Ctrl+Shift+P, depending on your OS. Open your dev tools, either by right-clicking the page and selecting Inspect element or using the keyboard shortcut ( Ctrl+Shift+I on Windows and Cmd+Shift+I on Mac). Maybe that’s the one you’re creating at work, or maybe it’s a popular site that you use. To start, you’ll want to open up a site that you know is internationalized. Changing the Locale in ChromeĬredit: I learned this trick from Kazuya Ito in their StackOverflow answer on how to change the browser locale via dev tools in Google Chrome. This is perfect for when you just want to view a page in a different language without messing with any other settings. As it turns out, Chromium browsers like Google Chrome and Edge allow us to also simulate loading the page in a different locale. Modern browsers have developer tools that allow us to simulate user preferences, vision impairments, device resolutions, and various other scenarios. (This is easier if you’re using a framework like Next.js.) However, all of these options require too much effort just to test a different locale, which is becoming an increasingly common task in front-end development. An alternative is to set up a query parameter in your app that can be used to override the locale. ![]() A less reliable option is to directly edit the lang and dir attributes via your dev tools Element inspector, but this isn’t recommended in hot-reload environment since your changes will be wiped as soon as the page refreshes. One is to change your browser’s default language settings, although it’s a little risky to do this if you can’t actually read that language. ![]() You can test locales in a number of ways. ![]() For example, I often test a handful of locales to make sure that the features I’m implementing correctly mirror their content in right-to-left (RTL) locales, or that content doesn’t overflow its bounds in locales with notoriously long strings (I’m looking at you, Deutsch). When working on internationalized apps, it’s important to test different locales to ensure that the design looks acceptable for a wide range of audiences.
0 Comments
Leave a Reply. |