Откройте Tizen Remote Web Inspector из командной строки

Question

Я собираюсь взять на себя поддержку приложения Tizen 2017 js, и я новичок в платформе. Насколько я знаю, приложение было разработано за пределами официальной среды разработки Tizen, взяв за основу базовый проект, а все остальное - с помощью обычных инструментов веб-разработки. Таким образом, приложение может быть установлено и открыто с помощью tizen Команда CLI, но, по-видимому, невозможно установить и проверить ее с помощью IDE (например, "Выполнить как" / "Отладить как" не удалось) по какой-либо причине.

Можно ли запустить удаленный веб-инспектор из командной строки?

Answer 1

Чтобы понять это, потребовалась целая вечность, но вы можете сказать телевизору открыть порт отладки, а затем использовать sdb и перенаправить его на локальный компьютер без Tizen Studio IDE.

Предполагая, что SDB подключен к телевизору, вы можете использовать следующие

sdb shell 0 debug SomePackage.Identifier

затем возьмите возвращенный порт и отправьте его

sdb forward tcp:45087 tcp:45087

Оттуда вы можете найти свое приложение для проверки по адресу chrome://inspect/devices#devices

Answer 2

Инструменты разработчика Chrome

Предпосылки

• Браузер Chrome
• Мост разработчика Samsung
• Инструмент командной строки

Действия:

0. Откройте инструмент командной строки (Терминал / Командная строка / Power Shell / Git Bash / что угодно)
1. sdb connect 192.168.0.123 // IP-адрес телевизора Samsung
2. sdb devices и убедитесь, что ваше устройство присутствует
3. Закройте приложение Telenor Stream на своем устройстве Samsung, удерживая нажатой кнопку возврата на пульте дистанционного управления Samsung.
4. Откройте приложение из командной строки sdb shell 0 debug SomePackage.Identifier должен дать этот ответ ... successfully launched pid = 15900 with debug 1 port: 37846
5. Использовать порт из ответа sdb forward tcp:37846 tcp:37846
6. В Open Chrome и вставьте chrome://inspect/#devices в адресной строке
7. Проверять Discover network targets щелкнуть Configre и добавить localhost:37846
8. Убедитесь, что приложение открыто на вашем Samsung, и оно будет отображаться как Remote Target
9. При повторном развертывании приложения повторите шаги 3–7.

Chii Отладчик

Предпосылки

• Узел
• Чии - https://github.com/liriliri/chii
• Инструмент командной строки

Действия

0. Откройте инструмент командной строки (Терминал / Командная строка / Power Shell / Git Bash)
1. Запустите Chii с помощью команды chii start -p 8080
2. Добавлять <script src="http://{your-computers-local-ip-address}:8080/target.js"></script> в index.html
3. Разверните приложение на Samsung TV и запустите приложение
4. Откройте браузер и вставьте http://localhost:8080/ в адресной строке
5. Нажмите Inspect

Убедитесь, что ваш сервер Chii запущен, если тег скрипта присутствует в index.html.

Прокомментируйте / удалите сценарий Chii, если вы не используете отладчик chii.

Answer 3

Расширяю ответы здесь для потомков, поскольку сегодня я боролся с этим.

Для правильного и автоматического запуска окна Chrome DevTools необходима следующая последовательность действий.

1. Чтобы уничтожить все запущенные экземпляры вашего приложения на телевизоре, запуститеsdb shell 0 was_kill SomePackage.Identifier
2. Чтобы запустить приложение в режиме отладки на телевизоре, запуститеsdb shell 0 debug SomePackage.Identifier
3. Прочитайте номер порта из вывода (см. скрипт Python ниже), предположим, что это был... successfully launched pid = 15900 with debug 1 port: 37846
4. Удалите все конфигурации перенаправленного порта.sdb forward --remove tcp:37846
5. Создать новую переадресацию портовsdb forward tcp:37846 tcp:37846
6. Найдите правильный URL-адрес окна инструментов разработчика, проанализировав JSON, возвращенныйhttp://localhost:37846/json, (ключевой интересjson[0].devtoolsFrontendUrl)
7. запустить Chrome с помощьюhttp://localhost:37846/{devtoolsFrontendUrl}

Я написал небольшой скрипт Python, который запускаю, чтобы начать сеанс отладки, он делает все это и открывает окно Chrome для отладки. Точно так же, как Tizen Studio.

python debug_on_tv.py --appid SomePackage.Identifier --chrome "C:\Program Files\Google\Chrome\Application\chrome.exe"

      #!/usr/bin/env python
# coding=utf-8

import argparse # Command-line argument parser
import subprocess
import requests, json
import tempfile

def parseArguments():
  parser = argparse.ArgumentParser()

  parser.add_argument("--appid", help="The identifier of the tizen app",
                                 type=str)

  parser.add_argument("--chrome", help="path to chrome executable",
                                   type=str)

  return parser.parse_args()

##
## Note: reverse engineer the shell 0 commands from 
##       https://github.com/Samsung/Wits/blob/c18cf03eced66aa66c3603c94fccf4c14d193f00/lib/appLaunchHelper.js
def runMain():
  try:
    # Construct the argument parser for the commandline
    args = parseArguments()


    # Force a UTF8 environment for the subprocess so that files with non-ascii characters are read correctly
    # for this to work we must not use the universal line endings parameter
    my_env = os.environ
    my_env['PYTHONIOENCODING'] = 'utf-8'

    # Start by killing any processes already running
    prog_args = ['sdb']
    prog_args.append('shell')
    prog_args.append('0')
    prog_args.append('was_kill')
    prog_args.append(args.appid)
    subprocess.run(prog_args)


    # Start the app in debug mode
    prog_args = ['sdb']
    prog_args.append('shell')
    prog_args.append('0')
    prog_args.append('debug')
    prog_args.append(args.appid)
    ret = subprocess.Popen(prog_args, stdout=subprocess.PIPE, stderr=subprocess.STDOUT, universal_newlines=True, env=my_env)
    debugport = 0
    try:
      while True:
        try:
          line = ret.stdout.readline()
          if not line:
            break
          line = line.strip()

          # Searching for >>  ... successfully launched pid = 10422 with debug 1 port: 34187
          if 'with debug 1 port' in line:
            debugport = line[line.rfind(':')+1:].strip()
        except UnicodeDecodeError:
          continue # Ignore all unicode errors, don't care!

      # Ensure that the return code was ok before continuing
      # Check if child process has terminated. Set and return returncode attribute. Otherwise, returns None.
      retcode = ret.poll()
      while retcode is None:
        retcode = ret.poll()
    except KeyboardInterrupt:
      ret.terminate()
      raise


    # Got the debug port, kill any existing connections on this port before establishing a new one
    prog_args = ['sdb']
    prog_args.append('forward')
    prog_args.append('--remove')
    prog_args.append('tcp:{0}'.format(debugport))
    subprocess.run(prog_args)

    # Got the Debug port, now forward it
    prog_args = ['sdb']
    prog_args.append('forward')
    prog_args.append('tcp:{0}'.format(debugport))
    prog_args.append('tcp:{0}'.format(debugport))
    subprocess.run(prog_args)

    # Extract the complete debug path from the remote view
    # Idea from: https://github.com/Samsung/webIDE-common-tizentv/blob/dev/lib/appLauncher.js#L141C42-L141C47
    responseJson = json.loads(requests.get('http://localhost:{0}/json'.format(debugport)).text)
    devUrl = responseJson[0]['devtoolsFrontendUrl']

    # Start chrome, 
    # see cmd line params: https://github.com/GoogleChrome/chrome-launcher/blob/main/src/flags.ts
    prog_args = [args.chrome]
    prog_args.append('--new-window')
    prog_args.append('--no-first-run')
    prog_args.append('--disable-setuid-sandbox')
    prog_args.append('--hide-crash-restore-bubble')
    prog_args.append('--activate-on-launch')
    prog_args.append('--no-default-browser-check')
    prog_args.append('--allow-file-access-from-files')
    prog_args.append('--disable-web-security')  # This is critical, otherwise we cannot do unsecure CORS
    prog_args.append('--disable-features=Translate,OptimizationHints,MediaRouter')
    prog_args.append('--disable-extensions')
    prog_args.append('--disable-component-extensions-with-background-pages')
    prog_args.append('--disable-background-networking')
    prog_args.append('--disable-component-update')
    prog_args.append('--disable-client-side-phishing-detection')
    prog_args.append('--disable-sync')
    prog_args.append('--metrics-recording-only')
    prog_args.append('--disable-default-apps')
    prog_args.append('--disable-backgrounding-occluded-windows')
    prog_args.append('--disable-renderer-backgrounding')
    prog_args.append('--disable-background-timer-throttling')
    prog_args.append('--disable-ipc-flooding-protection')
    prog_args.append('--password-store=basic')
    prog_args.append('--force-fieldtrials=*BackgroundTracing/default/')
    prog_args.append('--use-mock-keychain')
    prog_args.append('--enable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports') # This is done by WITS, so we do it as well
    prog_args.append('--user-data-dir={0}'.format(tempfile.TemporaryDirectory().name))   # To open a new window, # Create a temporary directory for the dummy chrome profile
    prog_args.append('--auto-open-devtools-for-tabs')
    prog_args.append('http://localhost:{0}{1}'.format(debugport,devUrl))
    subprocess.run(prog_args)

  finally:
    print("Done")

# If the script file is called by itself then execute the main function
if __name__ == '__main__':
  runMain()

Answer 4

Удаленный веб-инспектор в основном Chrome DevTool. Я знаю способ запуска Chrome Devtool из терминала. Поскольку вы, ребята, работаете с обычными инструментами веб-разработки, я надеюсь, что эта команда поможет. Может иметь некоторые ограничения, чем (Tizen Studio -> Debug As)

$ cd <tizen-workspace>/<project-dir>
$ google-chrome --auto-open-devtools-for-tabs index.html    //(or your file name)

Убедитесь, что на вашем компьютере установлен Google Chrome. Пожалуйста, проверьте эти документы, может дать вам некоторую идею.

Документация Chrome DevTools

https://developer.tizen.org/development/tizen-studio/web-tools/debugging-your-app/web-inspector