Ouvrir les outils de développement Safari / Google Chrome par programmation À partir de JavaScript
je cherche un moyen d'ouvrir le WebKit "developer tools" à partir d'un script attaché à une page web. J'ai besoin de solutions pour Google Chrome et Safari, qui ouvriront le volet developer-tools s'il n'est pas déjà ouvert, et (avec un peu de chance, si vous pouvez comprendre comment) également passer à un onglet/section particulière de ladite partie lors de l'ouverture.
(cas d'Utilisation, si ça intéresse quelqu'un: je veux ouvrir le console.log output-window s'il y a eu une erreur et qu'un développeur regarde la page; ceci page particulière sera la sortie de certains JavaScript unit-tests.)
je mets une prime sur cette question parce que c'est évidemment une question qui n'a jamais été répondue à la satisfaction de personne avant, et la réponse est velue. Merci de ne pas répondre, sauf si vous avez un réponse qui à la fois: 1) les travaux de la les deux navigateurs, et 2) ne nécessite pas D'API d'extension privée qui ne fonctionnera pas à partir d'une page Web statique.
voir (lié, mais spécifique à google Chrome, et les extensions): puis-je programmer l'ouverture des devtools à partir d'une extension GoogleChrome?
5 réponses
Simplement: Vous ne pouvez pas.
les outils Dev ne sont pas sablés (contrairement à n'importe quelle page web), accordant ainsi bac à sable environnements le pouvoir d'ouvrir et de contrôler un unsandboxed l'environnement est un défaut majeur de conception de sécurité.
j'espère que cela répond à votre question :-)
Vous ne pouvez pas utiliser directement les outils de développement de Chrome de vos pages web. Il est fourni avec le navigateur.
mais vous pouvez l'utiliser comme une application web régulière. Allez à outils de développement Chrome, puis allez à Contribuant. Vous trouverez de l'aide sur L'utilisation des outils Dev pour votre application.
mise en place
- installez Chrome Canary sur Mac OS / Windows ou téléchargez la dernière version de Chromium à partir de L'archive Chromium continuous builds Linux
- Clone Clin repo git à partir de https://chromium.googlesource.com/chromium/blink.git
- mettre en place un serveur web local qui servirait les fichiers de WebKit / Source/WebCore / inspector sur certains ports (8090)
Exécution
- exécutez une copie de Chrome Canary avec les options de ligne de commande suivantes: --remote-debugging-port = 9222 --user-data-dir=blink / chromeServerProfile --à distance de débogage-frontend="http://localhost:8090/front_end/inspector.HTML." Ces options font en sorte que Chrome permet les connexions websocket dans localhost:9222 et de servir l'interface utilisateur front-end à partir de votre compte Git local. (Ajustez le chemin vers chromeServerProfile pour qu'il soit un répertoire accessible en écriture dans votre système).
- ouvrir une page d'exemple (p. ex. www.chromium.org).
- lancez une deuxième copie de Chrome Canary avec l'indicateur de ligne de commande: --user-data-dir=/work/chromeClientProfile. Ouvrir
http://localhost:9222. Parmi les vignettes, vous verrez la page d'exemple de l'autre instance du navigateur. Cliquez dessus pour démarrer le débogage à distance de votre page échantillon. - la page Web de DevTools qui s'ouvre est servie à partir de l'interface remote-debugging-frontend dans la première instance du navigateur, qui sert à partir du système de fichiers local de Git repo. Déboguez cette page Web Devtools et éditez sa source comme n'importe quelle autre application web.
j'espère que c'est ce dont vous avez besoin.
Il n'y a aucun moyen de contrôler l'outil de développeur web à partir d'un script en page, autrement que par le API de la Console qui fournit principalement des installations d'exploitation forestière. Laisser les scripts contrôler plus que cela serait un sérieux problème de sécurité, car cela permettrait à une page Web de contrôler des parties du navigateur.
La seule API reliée à distance à ce que vous essayez de faire est le debugger commande, qui passe au volet de script seulement si les outils de développement ont été d'ores et déjà ouverte.
mais pour qui Essayez-vous de développer cette fonctionnalité?
si c'est pour les développeurs travaillant sur le site, alors il est préférable d'utiliser les outils de développement existants manuellement, en définissant les points de rupture, ou le pause sur les exceptions activer / désactiver.
Si c'est pour les utilisateurs finaux, ne pas. Sauf si votre site est censé être utilisé par des développeurs Web hautement techniques, vous allez seulement effrayer les utilisateurs loin si les outils de développement soudainement avec des erreurs.
si vous voulez vraiment Afficher des erreurs, vous pouvez implémenter votre propre cadre de journalisation et L'interface utilisateur pour la déclaration des erreurs, qui fonctionne avec JS de base et ne dépend pas d'un environnement de navigateur spécifique.
voici une autre réponse qui propose une solution à votre cas d'utilisation/objectif mentionné (détection des erreurs, obtention et affichage des logs de la console) et non l'objectif impossible dans le titre.
vous pouvez faire et utiliser un wrapper de console et l'utiliser dans votre code et/ou vous patch de singe les fonctions de la console si vous utilisez / importez des js externes, mais vous devez les appliquer avant de les charger.
non, tout navigateur sécurisé ne permettra pas à un script d'ouvrir une extension, car cela mène à l'insécurité.
mais, vous pouvez concevoir une API Add-On/ ou Console pour faire de même..
créer un Add-On comme pour satisfaire à cette exigence.
vous pouvez essayer d'envoyer des clés 'CTRL' + SHIFT' + 'I' qui peut fonctionner pour Chrome n'importe quel FireFox (en D'autres termes, vous devez utiliser 'F12'
mieux installer ce add-on / Extension et dites-moi si vous voulez, j'utilise quand il le faut. Quelques utils dans ce module fonctionne mieux que le haut -
j'espère que cela vous aidera à atteindre votre objectif..