Je viens juste de rejoindre ce StackExchange pour montrer notre appréciation de la réponse de Jeremy ci-dessus, et également pour ajouter les quelques lignes de JS que j’utilisais pour exporter la liste des onglets (car la copie avec le curseur n’est pas idéale!)
Comme Jeremy l'a dit, sélectionnez Remote devicessous l' icône de More toolsChrome devtools ⋮(en haut à droite du panneau):
- configurer le débogage USB sur votre téléphone (sous
Settings⇒ Developer options, racine non requise)
- notez que vous devez activer le
Developer optionsmenu, il est masqué par défaut pour protéger les utilisateurs
- sur mon téléphone, il fallait appuyer plusieurs fois sur le numéro de build sous
Settings⇒About Device
- Une fois cela fait, branchez votre clé USB et autorisez la connexion MTP
- lorsque le panneau des appareils distants Chrome devtools est ouvert, le téléphone demande alors d'autoriser le débogage USB.
- vous pouvez choisir de toujours faire confiance à l'ordinateur
Maintenant, l'appareil est connecté,
- ouvrez une deuxième vue devtools sur la vue devtools à partir de laquelle vous avez sélectionné
Remote devicesla possibilité de récupérer la liste des onglets à l'aide de JavaScript
- notez que vous devez avoir devtools en mode pop-out (utilisez le symbole des points de suspension verticaux en haut à droite du panneau) pour pouvoir le visualiser, sinon Command + Option + J (MAC)
Ctrl+ Shift+ J(WINDOWS) se ferme le premier panneau devtools.
- Développez la liste des premiers éléments à tous les onglets en cliquant sur "Afficher plus".
- pour écrire un script dans la liste, utilisez les quelques lignes de code suivantes [entrées dans la console de la deuxième fenêtre de devtools]
- NB
/deep/est le sélecteur CSS pour entrer #shadow-rootdes éléments DOM
Pour exporter une liste de toutes les URL ouvertes sur Chrome pour Android, j'ai choisi de simplement transformer la liste en chaîne de texte formatée par démarquage et de la copier dans le presse-papiers.
tabs = Array.from(document.querySelectorAll('div /deep/ div /deep/ div /deep/ div /deep/ div /deep/ .device-page-list .vbox'), s => ({name: s.querySelector('.device-page-title').textContent, url: s.querySelector('.device-page-url .devtools-link').href}))
str = '';
for (i=0;i<tabs.length;i++){
str += '['+tabs[i]['name']+']('+tabs[i]['url']+')\n'
}
copy(str)
Vous aurez alors une liste sur votre presse-papiers ressemblant à ceci:
[How can I export the list of open Chrome tabs? - Android Enthusiasts Stack Exchange](https://android.stackexchange.com/questions/56635/how-can-i-export-the-list-of-open-chrome-tabs)
[Get Started with Remote Debugging Android Devices | Tools for Web Developers | Google Developers](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)
[How To Enable USB Debugging On Your Android Phone](https://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/)
[Configure On-Device Developer Options | Android Studio](https://developer.android.com/studio/debug/dev-options.html)
...
Mise à jour
Pour une raison quelconque, je reçois parfois une erreur , disant que l' hrefattribut d'un nullélément n'était pas obtenu (lorsque je l'inspecte, il s'agit d'un nœud invisible qui sait). Pour contourner ce problème, utilisez plutôt cette version:
tabs = document.querySelectorAll('div /deep/ div /deep/ div /deep/ div /deep/ div /deep/ .device-page-list .vbox')
str = '';
for (i=0;i<tabs.length;i++){
if (tabs[i].querySelector('.device-page-url .devtools-link') != null){
str += '- ['+tabs[i].querySelector('.device-page-title').textContent + '](' + tabs[i].querySelector('.device-page-url .devtools-link').getAttribute('href') +')\n'
} else {
console.log(tabs[i])
}
}
copy(str)
