Add Testing & Debugging under Mobile Best Practices (MetaMask#169)

* Add mobile Testing and Debugging section * Review/edit mobile best practices, fixups Co-authored-by: Erik Marks <[email protected]>
HarryXCAD · Oct 21, 2020 · 6cc0f66 · 6cc0f66
1 parent 780a41d
commit 6cc0f66
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 28 deletions.
diff --git a/docs/guide/common-terms.md b/docs/guide/common-terms.md
@@ -21,7 +21,7 @@
 ### Account
 
 <ul>
-  <li id="account_l1">A public & private keypair that "holds" your funds.</li>
+  <li id="account_l1">A public and private keypair that "holds" your funds.</li>
 
   <li id="account_l2">Your funds are actually stored on the blockchain, not in the wallet or account.</li>
 
@@ -123,7 +123,7 @@
     Typically, they use a 24-word phrase. This phrase you should write down (not on your computer) and store separately from your hardware wallet.
   </li>
   <li id="hardwarew_l3">
-    If you lose your hardware wallet, you can still gain access to your accounts & funds via the word-phrase you wrote down.
+    If you lose your hardware wallet, you can still gain access to your accounts and funds via the word-phrase you wrote down.
   </li>
   <li id="hardwarew_l4">
     Never type the word-phrase on your computer. It defeats the purpose of your hardware wallet.
@@ -149,7 +149,7 @@
     <a href='http://i.imgur.com/FvyLewS.jpg' target='_blank'> Example 2 </a>
   </li>
   <li id="addressIdent_l5">
-    <em>Note: the above addresses are a single character different but have remarkably different icons & colors. Magic!</em>
+    <em>Note: the above addresses are a single character different but have remarkably different icons and colors. Magic!</em>
   </li>
 </ul>
 

diff --git a/docs/guide/create-dapp.md b/docs/guide/create-dapp.md
@@ -1,6 +1,6 @@
 # Create A Simple Dapp
 
-::: tip
+::: tip Tip
 We will be building this [app](https://metamask.github.io/test-dapp/)
 :::
 
@@ -175,7 +175,7 @@ MetamaskClientCheck();
 
 We've created a function that will be called whenever we click the button and disabled it. Let's dive into the `onClickInstall` function and create the logic inside of it.
 
-::: tip
+::: tip Tip
 For this part we will be using the '@metamask/onboarding' library we installed when we did the npm install. To learn more visit [here](https://github.com/MetaMask/metamask-onboarding#metamask-onboarding)
 :::
 Inside this function we want to:

diff --git a/docs/guide/ethereum-provider.md b/docs/guide/ethereum-provider.md
@@ -1,6 +1,6 @@
 # Ethereum Provider API
 
-::: tip Recommended Reading
+::: tip Tip Recommended Reading
 We recommend that all web3 site developers read the [Basic Usage](#basic-usage) section.
 :::
 
@@ -66,7 +66,7 @@ Please read our [Migration Guide](./provider-migration.html) for more details.
 
 ### `window.web3` Removal
 
-::: tip
+::: tip Tip
 If you do not use the `window.web3` object injected by MetaMask, you will not be affected by these changes.
 
 To understand why we're removing `window.web3`, please see [this GitHub issue](https://github.com/MetaMask/metamask-extension/issues/7163).
@@ -122,7 +122,7 @@ Consult [chainid.network](https://chainid.network) for more.
 
 ### ethereum.isMetaMask
 
-::: tip
+::: tip Tip
 This property is not guaranteed to be correct for all providers. Non-MetaMask providers may also set this property to `true`.
 :::
 
@@ -165,7 +165,7 @@ ethereum.autoRefreshOnNetworkChange = false;
 
 ### ethereum.isConnected()
 
-::: tip
+::: tip Tip
 Note that this method has nothing to do with the user's accounts.
 
 You may often encounter the word "connected" in reference to whether a web3 site can access the user's accounts.
@@ -291,7 +291,7 @@ Callers are identified by their URL _origin_, which means that all sites with th
 
 This means that `accountsChanged` will be emitted whenever the user's exposed account address changes.
 
-::: tip
+::: tip Tip
 We plan to allow the `eth_accounts` array to be able to contain multiple addresses in the near future.
 :::
 
@@ -358,7 +358,7 @@ Common codes and their meaning include:
 
 For the complete list of errors, please see [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193#provider-errors) and [EIP-1474](https://eips.ethereum.org/EIPS/eip-1474#error-codes).
 
-::: tip
+::: tip Tip
 The [`eth-rpc-errors`](https://npmjs.com/package/eth-rpc-errors) package implements all RPC errors thrown by the MetaMask provider, and can help you identify their meaning.
 :::
 

diff --git a/docs/guide/mobile-best-practices.md b/docs/guide/mobile-best-practices.md
@@ -4,7 +4,7 @@ If this page doesn't answer your question, please feel free to open an issue [in
 
 ## The Provider (window.ethereum)
 
-The [provider API](./ethereum-provider.html) is the same for both MetaMask mobile and the desktop extension.
+The [provider API](./ethereum-provider.html) is the same for both MetaMask Mobile and the desktop extension.
 However, the providers become available (i.e., are injected into the page) at different points in the page lifecycle.
 
 ### Provider Availability
@@ -45,12 +45,12 @@ function handleEthereum() {
 
 ## Using WalletConnect
 
-With WalletConnect, you can use MetaMask mobile as a signer while using applications on another browser, desktop, or mobile application.
+With WalletConnect, you can use MetaMask Mobile as a signer while using applications on another browser, desktop, or mobile application.
 Check out the [WalletConnect mobile linking docs](https://docs.walletconnect.org/mobile-linking) for more info.
 
 ## Deeplinking
 
-::: tip
+::: tip Tip
 [Click here to create deeplinks for your application.](https://metamask.github.io/metamask-deeplinks/#)
 :::
 
@@ -62,9 +62,57 @@ URLs embedded in QR codes, hyperlinks in web pages, emails, or chat messages ena
 
 You can use deeplinks for things like:
 
-- Creating a URL so your users can open your app directly in MetaMask mobile to interact with your application with their Ethereum account.
+- Creating a URL so your users can open your app directly in MetaMask Mobile to interact with your application with their Ethereum account.
 
 - Providing a one-click experience such that users can easily make payments to another account (with pre-filled parameters like recipient address, amount, network, etc.)
 
 - Let your users make gasless and instant transactions with Connext payment channel requests
   - This requires that the user opts in for the InstaPay experimental feature.
+
+## Website Testing and Debugging
+
+Test and debug your web3 site using MetaMask Mobile on any iOS or Android device with ease.
+
+### Testing
+
+1. Configure your development server to run on your host machine's local IP address `192.168.x.x`, or `0.0.0.0`.
+2. Make sure your testing device is using the same WiFi connection as the machine hosting the server.
+3. In the MetaMask Mobile web browser, navigate to your website at `http://YOUR_LOCAL_IP:PORT`.
+
+::: tip Tip
+If you're using an Android device, you must use `xip` in your url. Example: `http://192.168.x.x.xip.io:8000`
+:::
+
+### Debugging
+
+::: warning Important
+For security purposes, web browser debugging on both iOS and Android will not work if the app was downloaded through the Apple App Store or Google Play Store.
+You must build the app locally from [MetaMask Mobile repository](https://github.com/MetaMask/metamask-mobile) and run it on a simulator or physical device.
+:::
+
+#### iOS
+
+1. Open **Safari Preferences** -> **Advanced** -> enable the **Show Develop menu in menu bar** checkbox
+2. Open MetaMask Mobile in an iOS simulator or iOS device
+3. In the Safari menu bar -> **Develop** -> **[device name]** -> **[app name]** -> **[url - title]**
+
+::: tip Tip
+When debugging on a physical device, you must enable Web Inspector in your device's settings:
+
+**Settings** -> **Safari** -> **Advanced** -> **Web Inspector**
+:::
+
+#### Android
+
+1. Open MetaMask Mobile in an Android emulator or Android device
+2. Open Google Chrome's DevTools -> menu (3 dots) -> **More tools** -> **Remote devices**
+You may also navigate to `chrome://inspect` from Chrome to display the list of available devices for debugging
+3. Select your device on the left and click **Inspect** on the browser contents you'd like to inspect.
+
+::: tip Tip
+When debugging on a physical device you must enable USB debugging in your device's settings:
+
+**Settings** -> **System** -> **About Phone** -> **Developer options** -> **Enable USB debugging**
+:::
+
+You can now debug MetaMask Mobile's browser contents just as you would on the web!
diff --git a/docs/guide/mobile-getting-started.md b/docs/guide/mobile-getting-started.md
@@ -8,7 +8,7 @@
 - Users can sign with their MetaMask wallet, whether they use your dapp on MetaMask browser or prefer using other primary browsers or native mobile app or desktop. [*works with dapps supporting Wallet Connect]
 - Buy crypto easily, with the best rates, and supported in a wide-range of countries.
 - Manage your cryptoassets - watch or trade tokens, collectibles
-- Send payments to your family & friends (gasless\* and in normal transaction - whatever they prefer)
+- Send payments to your family and friends (gasless\* and in normal transaction - whatever they prefer)
 - Request payment from a friend, an employer, etc.
 - We have lots of more exciting stuff coming up - stay tuned, this is just the beginning :wink:
 

diff --git a/docs/guide/provider-migration.md b/docs/guide/provider-migration.md
@@ -86,7 +86,7 @@ This version of `web3` is deprecated, [has known security issues](https://github
 If your website relies on our `window.web3` object, your Ethereum-related functionality will break when we stop injecting `window.web3`.
 Continue reading to learn more about the migration options. Some are as simple as a one-line change.
 
-::: tip
+::: tip Tip
 Regardless of how you choose to migrate, you will probably want to read the `[email protected]` documentation, which you can find [here](https://github.com/ethereum/web3.js/blob/0.20.7/DOCUMENTATION.md).
 :::
 

diff --git a/docs/guide/rpc-api.md b/docs/guide/rpc-api.md
@@ -4,7 +4,7 @@ MetaMask uses the [`ethereum.request(args)` method](./ethereum-provider.html#eth
 
 The API is based on an interface exposed by all Ethereum clients, along with a growing number of methods that may or may not be supported by other wallets.
 
-::: tip
+::: tip Tip
 All RPC method requests can return errors.
 Make sure to handle errors for every call to `ethereum.request(args)`.
 :::
@@ -53,7 +53,7 @@ If you're interested in learning more about the theory behind this _capability_-
 
 ### eth_requestAccounts
 
-::: tip EIP-1102
+::: tip Tip EIP-1102
 This method is specified by [EIP-1102](https://eips.ethereum.org/EIPS/eip-1102).
 It is equivalent to the deprecated [`ethereum.enable()`](./ethereum-provider.html#ethereum-enable) provider API method.
 
@@ -98,7 +98,7 @@ function connect() {
 
 ### wallet_requestPermissions
 
-::: tip Platform Availability
+::: tip Tip Platform Availability
 This RPC method is not yet available in MetaMask Mobile.
 :::
 
@@ -159,7 +159,7 @@ function requestPermissions() {
 
 ### wallet_getPermissions
 
-::: tip Platform Availability
+::: tip Tip Platform Availability
 This RPC method is not yet available in MetaMask Mobile.
 :::
 
@@ -177,7 +177,7 @@ If the caller has no permissions, the array will be empty.
 
 ### wallet_registerOnboarding
 
-::: tip
+::: tip Tip
 As an API consumer, you are unlikely to have to call this method yourself.
 Please see the [Onboarding Library documentation](/onboarding-library.html) for more information.
 :::
@@ -199,7 +199,7 @@ Instead of calling this method directly, you should use the [`@metamask/onboardi
 
 ### wallet_watchAsset
 
-::: tip EIP-747
+::: tip Tip EIP-747
 This method is specified by [EIP-747](https://eips.ethereum.org/EIPS/eip-747).
 :::
 
@@ -249,7 +249,7 @@ ethereum.request({
 
 ### eth_getEncryptionPublicKey
 
-::: tip Platform Availability
+::: tip Tip Platform Availability
 This RPC method is not yet available in MetaMask Mobile.
 :::
 
@@ -317,7 +317,7 @@ const encryptedMessage = ethUtil.bufferToHex(
 
 ### eth_decrypt
 
-::: tip Platform Availability
+::: tip Tip Platform Availability
 This RPC method is not yet available in MetaMask Mobile.
 :::
 

diff --git a/docs/guide/site-compatibility-checklist.md b/docs/guide/site-compatibility-checklist.md
@@ -1,12 +1,12 @@
 # Site Compatibility Checklist
 
-- Ensure that your site is compatible with the [MetaMask Ethereum provider API](./ethereum-provider.html) and review the [MetaMask mobile best practices](./mobile-best-practices.html)
+- Ensure that your site is compatible with the [MetaMask Ethereum provider API](./ethereum-provider.html) and review the [MetaMask Mobile best practices](./mobile-best-practices.html)
 
-- Include MetaMask mobile as a listed wallet in your application, and link to open the MetaMask mobile app (if installed) or to go to the app store (if not yet installed)
+- Include MetaMask Mobile as a listed wallet in your application, and link to open the MetaMask Mobile app (if installed) or to go to the app store (if not yet installed)
   - We recommend adding a `Connect With MetaMask` button and using [deeplinks](https://metamask.github.io/metamask-deeplinks/)
   - For more information about deeplinks, please see the [deeplinking documentation](./mobile-best-practices.html#deeplinking)
 
-Please direct your users to either the relevant app store listing or to [the MetaMask homepage](https://metamask.io/download.html) to download MetaMask mobile
+Please direct your users to either the relevant app store listing or to [the MetaMask homepage](https://metamask.io/download.html) to download MetaMask Mobile
 
 ## Web3 Site UI Libraries