简体   繁体   English

如何在Galaxy S3 Android设备上的Chrome中执行检查元素?

[英]How can I perform an inspect element in Chrome on my Galaxy S3 Android device?

How can I perform an inspect element in Chrome on my Galaxy S3 Android device? 如何在Galaxy S3 Android设备上的Chrome中执行检查元素?

I've tried a couple of guides online, one saying to use this android SDK thing to run adb forward tcp:9222 localabstract:chrome_devtools_remote, but all that says is "error:device not found". 我已经尝试了一些在线指南,一个说使用这个Android SDK的东西来运行adb forward tcp:9222 localabstract:chrome_devtools_remote,但所有这些都是“错误:设备未找到”。

Anyone have any ideas on how to do this? 任何人对如何做到这一点都有任何想法?

You can now do this without the use of Android SDK. 您现在可以在不使用Android SDK的情况下执行此操作。

In the latest version of chrome (I am working on 34.0.x): 在最新版本的chrome(我正在使用34.0.x):

  • Navigate to chrome://inspect/ 导航到chrome://inspect/
  • Check Discover USB Devices 检查Discover USB Devices
  • Plug in your phone via USB. 通过USB插入手机。 A popup should spawn asking for permission to connect to your computer. 应该生成弹出窗口,要求获得连接到计算机的权限。 Accept it. 接受。

There will now be an item on the chrome://inspect/ pages for your phone, and you can click inspect . 现在chrome://inspect/上有一个项目chrome://inspect/手机页面,您可以点击inspect Dev tools will spawn and voila! 开发工具将产生并瞧!

在Android上使用Chrome进行远程调试:试试这个https://developer.chrome.com/devtools/docs/remote-debugging

Update: 8-20-2015 更新:2015年8月20日

Please note the instructions have changed since this question was asked 2 yrs ago. 请注意,自2年前询问此问题以来,说明已更改。

So on Newer versions of Android and Chrome for Android. 所以在较新版本的Android和Chrome for Android上。 You need to use this. 你需要使用它。

https://developers.google.com/web/tools/setup/remote-debugging/remote-debugging?hl=en https://developers.google.com/web/tools/setup/remote-debugging/remote-debugging?hl=en

Original Answer: 原答案:

I have the S3 and it works fine. 我有S3,它工作正常。 I have found that a common mistake is not enabling USB Debugging in Chrome mobile. 我发现一个常见的错误是没有在Chrome移动设备中启用USB调试。 Not only do you have to enable USB debugging on the device itself under developer options but you have to go to the Chrome Browser on your phone and enable it in the settings there too. 您不仅需要在开发者选项下在设备上启用USB调试,还必须在手机上使用Chrome浏览器并在其中的设置中启用它。

Try this with the SDK 尝试使用SDK

  1. Chrome for Mobile - Settings > Developer Tools > [x] Enable USB Web debugging Chrome for Mobile - 设置>开发人员工具> [x]启用USB Web调试
  2. Device - Settings > Developer options > [x] USB debugging 设备 - 设置>开发人员选项> [x] USB调试
  3. Connect Device to Computer 将设备连接到计算机
  4. Enable port forwarding on your computer by doing the following command below 通过执行以下命令在计算机上启用端口转发

    C:\\adb forward tcp:9222 localabstract:chrome_devtools_remote C:\\ adb forward tcp:9222 localabstract:chrome_devtools_remote

Go to http://localhost:9222 in Chrome on your Computer 转到计算机上Chrome中的http://localhost:9222

TroubleShooting: 故障排除:

If you get command not found when trying to run ADB , make sure Platform-Tools is in your path or just use the whole path to your SDK and run it 如果在尝试运行ADBcommand not found ,请确保您的路径中有Platform-Tools,或者只使用SDK的完整路径并运行它

C:\path-to-SDK\platform-tools\adb forward tcp:9222 localabstract:chrome_devtools_remote

If you get " device not found ", then run adb kill-server and then try again. 如果您找到“ device not found ”,请运行adb kill-server ,然后重试。

To start with you'll need the Android SDK to get started: http://developer.android.com/sdk/index.html BUT select for existing IDE so you get the tools rather than all of Android Studio. 首先,您需要启动Android SDK: http//developer.android.com/sdk/index.html但是选择现有的IDE,这样您就可以获得工具而不是Android Studio。

In Chrome Beta on your Android device do the following: 在Android设备上的Chrome测试版中,执行以下操作:

Menu > Settings > Developer Tools > Enable USB Debugging 菜单>设置>开发人员工具>启用USB调试

Hit the home key on the device and go to Settings > Developer Options > Enable USB Debugging 点击设备上的主页键,然后转到设置>开发人员选项>启用USB调试

[Note: If you can't see Developer Options, go to Settings > About Device > Then tap the Build Number a number of times and eventually you'll see a message saying you are now a developer or something similar] [注意:如果您看不到开发者选项,请转到设置>关于设备>然后多次点击内部版本号,最终您会看到一条消息,说您现在是开发人员或类似的东西]

Connect your phone to your Computer via USB 通过USB将手机连接到计算机

On your Desktop open Chrome Canary (I think stable and Beta currently have issues): 在您的桌面上打开Chrome Canary(我认为稳定和Beta目前存在问题):

In the address bar type: chrome://flags and enable - "Enable Developer Tools experiments" and hit the Relaunch button that appears. 在地址栏中输入:chrome:// flags和enable - “启用开发人员工具实验”,然后点击出现的重新启动按钮。

Once it's relaunched open a terminal and run adb devices, you should now see your device appear in the list. 重新启动终端并运行adb设备后,您现在应该会看到您的设备出现在列表中。 When it has, in Canary go to chrome://inspect there you will see your device, so now click inspect. 如果有,在Canary转到chrome://检查那里你会看到你的设备,所以现在点击检查。

This will open up devtools for your Chrome on Android. 这将为Android上的Chrome打开devtools。

Now click on the cog in the corner, then go to Experiments > Enable Port Forwarding (If you don't see port forwarding, you might not be in Chrome Beta) 现在点击角落里的cog,然后转到Experiments> Enable Port Forwarding(如果你没有看到端口转发,你可能不在Chrome Beta中)

Once Port forwarding is enabled, close and open dev tools. 启用端口转发后,关闭并打开开发工具。

Go back to the cog and select Port Forwarding, then type in the port you want to forward (ie for locahost:9000 on my local machine I'd type 9000 [Device port] and 127.0.0.1:9000 [Target] 回到cog并选择Port Forwarding,然后键入要转发的端口(即locahost:我本地机器上的9000我输入9000 [Device port]和127.0.0.1:9000 [Target]

There is a bug open where the first port is ignored, so it might be worth hitting enter on the first line and re-entering the same details on the second line. 在第一个端口被忽略的情况下会打开一个错误,因此可能值得在第一行输入enter并在第二行重新输入相同的详细信息。

You can now put localhost:9000 (or your port number) in Chrome for Android and view the site and use DevTools to inspect the page. 您现在可以将localhost:9000(或您的端口号)放入Chrome for Android并查看该站点并使用DevTools检查该页面。

More details under Reverse Port Forwarding section of this site: https://developers.google.com/chrome-developer-tools/docs/remote-debugging 有关此站点的“反向端口转发”部分的更多详细信息,请访问: https//developers.google.com/chrome-developer-tools/docs/remote-debugging

I have an S3 and used this guide from Google: 我有一个S3并使用了Google的这个指南:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Really easy, works flawlessly. 非常简单,完美无瑕。

Mainly follow the guide here https://developers.google.com/chrome-developer-tools/docs/remote-debugging . 主要按照此处的指南https://developers.google.com/chrome-developer-tools/docs/remote-debugging But ... 但......

  • For Samsung devices don't forget to install Samsung Kies. 对于三星设备,请不要忘记安装Samsung Kies。
  • For me it worked only with Chrome Canary , not with Chrome. 对我来说,它只适用于Chrome Canary ,而不适用于Chrome。
  • You might also need to install Android SDK. 您可能还需要安装Android SDK。

我无法完成此任务,而是使用Play商店中提供的查看html源应用程序来简单地查找元素。

Keep in mind that if you want to use the chrome inspect in Windows, besides enabling usb debugging on you mobile, you should also install the usb driver for Windows. 请记住,如果要在Windows中使用chrome inspect,除了在移动设备上启用USB调试之外,还应安装适用于Windows的usb驱动程序。

You can find the drivers you need from the list here: 您可以从此处的列表中找到所需的驱动程序:

http://androidxda.com/download-samsung-usb-drivers http://androidxda.com/download-samsung-usb-drivers

Furthermore, you should use a newer version of Chrome mobile than the one in your Desktop. 此外,您应该使用较新版本的Chrome移动版,而不是桌面版。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM