Добавляет про отладку на мобильных

pepelsbey · Feb 16, 2022 · 6e2b8c0 · 6e2b8c0
1 parent ad54512
commit 6e2b8c0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/mobile-debug/README.md b/mobile-debug/README.md
@@ -0,0 +1,14 @@
+# Как тестировать на телефонах и в эмуляторах и почему фронтендеру никуда без макбука
+
+[Демо с ручкой](https://pepelsbey.github.io/playground/mobile-debug/)
+
+- [Xcode](https://apps.apple.com/app/497799835)
+- [Android Studio](https://developer.android.com/studio)
+- [Android: Configure on-device developer options](https://developer.android.com/studio/debug/dev-options)
+- [Remote debug Android devices](https://developer.chrome.com/docs/devtools/remote-debugging/)
+
+10.0.2.2 — выход на localhost в Android Emulator
+
+Settings > Safari > Advanced > Web Inspector — настройки отладки в iOS
+
+Подробнее в видео
diff --git a/mobile-debug/index.html b/mobile-debug/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Дай пять!</title>
+    <style>
+        html, body {
+            height: 100%;
+        }
+
+        body {
+            margin: 0;
+            display: grid;
+            place-items: center;
+            background-color: aliceblue;
+        }
+
+        .button {
+            margin: 0;
+            padding: 1em;
+            border: none;
+            background-color: white;
+            font-size: inherit;
+            outline: 0.8em solid tomato;
+        }
+
+        .button__icon {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <button class="button">
+        <svg class="button__icon" viewBox="0 0 24 24" width="160" height="160"><path fill="currentcolor" d="M18 24h-6.55c-1.08 0-2.14-.45-2.89-1.23l-7.3-7.61 2.07-1.83c.62-.55 1.53-.66 2.26-.27L8 14.34V4.79c0-1.38 1.12-2.5 2.5-2.5.17 0 .34.02.51.05.09-1.3 1.17-2.33 2.49-2.33.86 0 1.61.43 2.06 1.09.29-.12.61-.18.94-.18 1.38 0 2.5 1.12 2.5 2.5v.28c.16-.03.33-.05.5-.05 1.38 0 2.5 1.12 2.5 2.5V20c0 2.21-1.79 4-4 4zM4.14 15.28l5.86 6.1c.38.39.9.62 1.44.62H18c1.1 0 2-.9 2-2V6.15c0-.28-.22-.5-.5-.5s-.5.22-.5.5V12h-2V3.42c0-.28-.22-.5-.5-.5s-.5.22-.5.5V12h-2V2.51c0-.28-.22-.5-.5-.5s-.5.22-.5.5V12h-2V4.79c0-.28-.22-.5-.5-.5s-.5.23-.5.5v12.87l-5.35-2.83-.51.45z"/></svg>
+    </button>
+</body>
+</html>