| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Developing Che-Theia plug-ins :: Eclipse Che Documentation</title> |
| <link rel="canonical" href="https://www.eclipse.org/che/docs/che-7/contributor-guide/developing-che-theia-plug-ins/"> |
| <meta name="keywords" content="contributor-guide, developing-che-theia-plug-ins"> |
| <meta name="generator" content="Antora 2.3.3"> |
| <link rel="stylesheet" href="../../../_/css/site.css"> |
| <link rel="stylesheet" href="../../../_/css/extra.css"> |
| <link rel="stylesheet" href="../../../_/font-awesome-4.7.0/css/font-awesome.min.css"> |
| <link rel="icon" href="../../../favicon.ico" type="image/x-icon"> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-37306001-2"></script> |
| <script>function gtag(){dataLayer.push(arguments)};window.dataLayer=window.dataLayer||[];gtag('js',new Date());gtag('config','UA-37306001-2')</script> |
| </head> |
| <body class="article"> |
| <header class="header" role="banner"> |
| <nav class="navbar"> |
| <div class="navbar-brand"> |
| <div class="navbar-item"> |
| <button class="navbar-burger" data-target="topbar-nav"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </button> |
| <img src="../../../_/img/icon-eclipse-che.svg" class="navbar-logo" alt="Eclipse Che logo"> |
| <a href="https://www.eclipse.org/che/docs">Eclipse Che Documentation</a> |
| </div> |
| </div> |
| <div id="topbar-nav" class="navbar-menu"> |
| <div class="navbar-end"> |
| <div class="navbar-item hide-for-print"> |
| <script async src="https://cse.google.com/cse.js?cx=002898025167115630151:gnr5edrg2eo"></script> |
| <div class="gcse-searchbox" enableAutoComplete="true"></div> |
| </div> |
| <a class="navbar-item" href="#">Home</a> |
| <a class="navbar-item" href="https://che.eclipse.org/">Blog</a> |
| <a class="navbar-item" href="https://github.com/eclipse/che">Source Code</a> |
| </div> |
| </div> |
| </nav> |
| <div class="gcse-searchresults"></div> |
| </header> |
| <div class="body"> |
| <div class="nav-container" data-component="che-7" data-version="master"> |
| <aside class="nav"> |
| <div class="panels"> |
| <div class="nav-panel-menu is-active" data-panel="menu"> |
| <nav class="nav-menu"> |
| <h3 class="title"><a href="../../overview/introduction-to-eclipse-che/">Eclipse Che 7 Documentation</a></h3> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="0"> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../overview/introduction-to-eclipse-che/">Introduction to Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../overview/che-architecture/">Che architecture</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../hosted-che/hosted-che/">Hosted Che</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <button class="nav-item-toggle"></button> |
| <span class="nav-text">End-user Guide</span> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/navigating-che/">Navigating Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/navigating-che-using-the-dashboard/">Navigating Che: dashboard</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/importing-certificates-to-browsers/">Importing certificates to browsers</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/accessing-che-from-openshift-developer-perspective/">Navigating Che from OpenShift Developer Perspective</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/che-theia-ide-basics/">Che-Theia IDE basics</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/defining-custom-commands-for-che-theia/">Defining custom commands for Che-Theia</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/version-control/">Version Control</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/che-theia-troubleshooting/">Che-Theia Troubleshooting</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/workspaces-overview/">Using developer workspaces</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/configuring-a-workspace-using-a-devfile/">Configuring a workspace using a devfile</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/making-a-workspace-portable-using-a-devfile/">Making a workspace portable using a devfile</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/creating-and-configuring-a-new-workspace/">Creating and configuring a new workspace</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/importing-a-kubernetes-application-into-a-workspace/">Importing a Kubernetes application into a workspace</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/remotely-accessing-workspaces/">Remotely accessing workspaces</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/creating-a-workspace-from-code-sample/">Creating a workspace from code sample</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/creating-a-workspace-by-importing-source-code-of-a-project/">Creating a workspace by importing source code of a project</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/mounting-a-secret-as-a-file-or-an-environment-variable-into-a-workspace-container/">Mounting a secret as a file or an environment variable into a workspace container</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/customizing-developer-environments/">Customizing developer environments</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/what-is-a-che-theia-plug-in/">What is a Che-Theia plug-in</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-alternative-ides-in-che/">Using alternative IDEs in Che</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/adding-tools-to-che-after-creating-a-workspace/">Adding tools to Che after creating a workspace</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/configuring-oauth-authorization/">Configuring OAuth authorization</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/configuring-github-oauth/">Configuring GitHub OAuth</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/configuring-openshift-oauth/">Configuring OpenShift OAuth</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/using-artifact-repositories-in-a-restricted-environment/">Using artifact repositories in a restricted environment</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-maven-artifact-repositories/">Using Maven artifact repositories</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-gradle-artifact-repositories/">Using Gradle artifact repositories</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-python-artifact-repositories/">Using Python artifact repositories</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-go-artifact-repositories/">Using Go artifact repositories</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-nuget-artifact-repositories/">Using NuGet artifact repositories</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/using-npm-artifact-repositories/">Using npm artifact repositories</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../end-user-guide/troubleshooting-che/">Troubleshooting Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/troubleshooting-slow-workspaces/">Troubleshooting slow workspaces</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/troubleshooting-network-problems/">Troubleshooting network problems</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/starting-a-che-workspace-in-debug-mode/">Starting a workspace in debug mode</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../end-user-guide/restarting-a-che-workspace-in-debug-mode-after-start-failure/">Restarting a workspace in debug mode after start failure</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <button class="nav-item-toggle"></button> |
| <span class="nav-text">Installation Guide</span> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../installation-guide/supported-platforms/">Supported platforms</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../installation-guide/configuring-the-che-installation/">Configuring the Che installation</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../installation-guide/installing-che/">Installing Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../installation-guide/installing-che-in-cloud/">Installing Che in cloud</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-openshift-4-using-operatorhub/">Installing Che on OpenShift 4</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-openshift-3-using-the-operator/">Installing Che on OpenShift 3</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-kubespray/">Installing Che on Kubespray</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-aws/">Installing Che on AWS</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-google-cloud-platform/">Installing Che on Google Cloud</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-microsoft-azure/">Installing Che on Microsoft Azure</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../installation-guide/installing-che-locally/">Installing Che locally</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-codeready-containers/">Installing Che on CodeReady Containers</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-docker-desktop/">Installing Che on Docker Desktop</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-minikube/">Installing Che on Minikube</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-minishift/">Installing Che on Minishift</a> |
| </li> |
| <li class="nav-item" data-depth="3"> |
| <a class="nav-link" href="../../installation-guide/installing-che-on-kind/">Installing Che on Kind</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/using-the-chectl-management-tool/">Using the chectl management tool</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/installing-che-in-a-restricted-environment/">Installing Che in restricted environment</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../installation-guide/advanced-configuration/">Advanced configuration</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/advanced-configuration-options-for-the-che-server-component/">Advanced configuration options for Che server</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/configuring-namespace-strategies/">Configuring namespace strategies</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/configuring-workspace-exposure-strategies/">Configuring workspace exposure strategies</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/configuring-workspaces-nodeselector/">Configuring workspaces nodeSelector</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/configuring-che-hostname/">Configuring Che hostname</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/deploying-che-with-support-for-git-repositories-with-self-signed-certificates/">Deploying Che with support for Git repositories with self-signed certificates</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/installing-che-using-storage-classes/">Installing Che using storage classes</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/configuring-storage-types/">Configuring storage types</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/importing-tls-certificates-to-che-server-java-truststore/">Importing TLS certificates to Che server Java truststore</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../installation-guide/upgrading-che/">Upgrading Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/upgrading-che-using-operatorhub/">Upgrading Che using OperatorHub</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/upgrading-che-using-the-cli-management-tool/">Upgrading Che using the CLI management tool</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/upgrading-che-known-issues/">Known issues</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../installation-guide/uninstalling-che/">Uninstalling Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/uninstalling-che-after-operatorhub-installation-using-openshift-web-console/">Using the OpenShift web console</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/uninstalling-che-after-operatorhub-installation-using-openshift-cli/">Using OpenShift CLI</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../installation-guide/uninstalling-che-after-chectl-installation/">Using chectl</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <button class="nav-item-toggle"></button> |
| <span class="nav-text">Administration Guide</span> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../administration-guide/che-architecture-overview/">Che architecture</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/che-workspace-controller/">Che workspace controller</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/che-workspaces-architecture/">Che workspaces architecture</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../administration-guide/calculating-che-resource-requirements/">Calculating Che resource requirements</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../administration-guide/customizing-the-devfile-and-plug-in-registries/">Customizing devfile and plug-in registries</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/building-and-running-a-custom-registry-image/">Building and running a custom registry image</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/including-the-plug-in-binaries-in-the-registry-image/">Including the plug-in binaries in the registry image</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/editing-a-devfile-and-plug-in-at-runtime/">Editing a devfile and plug-in at runtime</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/using-a-visual-studio-code-extension-in-che/">Using a VS Code extension in Che</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/testing-a-visual-studio-code-extension-in-che/">Testing a VS Code extension in Che</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../administration-guide/retrieving-che-logs/">Retrieving Che logs</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/viewing-kubernetes-events/">Accessing Kubernetes events on OpenShift</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/viewing-operator-events/">Viewing the Operator events on OpenShift</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/viewing-che-server-logs/">Viewing Che server logs</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/viewing-external-service-logs/">Viewing external service logs</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/viewing-che-workspaces-logs/">Viewing Che workspaces logs</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/viewing-plug-in-broker-logs/">Viewing Plug-in broker logs</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/collecting-logs-using-chectl/">Collecting logs using chectl</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../administration-guide/monitoring-che/">Monitoring Che</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../administration-guide/tracing-che/">Tracing Che</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../administration-guide/managing-users/">Managing users</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/configuring-authorization/">Configuring authorization</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/removing-user-data/">Removing user data</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../administration-guide/securing-che/">Securing Che</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/authenticating-users/">Authenticating users</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/authorizing-users/">Authorizing users</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../administration-guide/backup-and-disaster-recovery/">Backup and disaster recovery</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/external-database-setup/">External database setup</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../administration-guide/persistent-volumes-backups/">Persistent Volumes backups</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../administration-guide/caching-images-for-faster-workspace-start/">Caching images for faster workspace start</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <button class="nav-item-toggle"></button> |
| <span class="nav-text">Contributor Guide</span> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../branding-che-theia/">Branding Che-Theia</a> |
| </li> |
| <li class="nav-item is-current-page" data-depth="1"> |
| <a class="nav-link" href="./">Developing Che-Theia plug-ins</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../testing-che-theia-plug-ins/">Testing Che-Theia plug-ins</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../publishing-che-theia-plug-ins/">Publishing Che-Theia plug-ins</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../adding-support-for-a-new-language/">Adding support for a new language</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../adding-support-for-a-new-debugger/">Adding support for a new debugger</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../che-extensibility-reference/">Che extensibility reference</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../che-extension-points/">Che extension points</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../che-theia-plug-in-api/">Che-Theia plug-in API</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../debug-adapter-protocol/">Debug Adapter Protocol</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../language-server-protocol/">Language Server Protocol</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <button class="nav-item-toggle"></button> |
| <span class="nav-text">Extensions</span> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../extensions/eclipse-che4z/">Eclipse Che4z</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <a class="nav-link" href="../../extensions/openshift-connector-overview/">OpenShift Connector</a> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../extensions/features-of-openshift-connector/">Features of OpenShift Connector</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../extensions/installing-openshift-connector-in-che/">Installing OpenShift Connector in Eclipse Che</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../extensions/authenticating-with-openshift-connector-from-che/">Authenticating with OpenShift Connector from Eclipse Che</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../extensions/creating-components-with-openshift-connector-in-che/">Creating Components with OpenShift Connector in Eclipse Che</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="../../extensions/connecting-source-code-from-github-to-a-openshift-component-using-openshift-connector/">Connecting source code from GitHub to a OpenShift Component</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../extensions/telemetry/">Telemetry</a> |
| </li> |
| </ul> |
| </li> |
| <li class="nav-item" data-depth="0"> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="../../glossary/che-glossary/">Che glossary</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </nav> |
| </div> |
| <div class="nav-panel-explore" data-panel="explore"> |
| <div class="context"> |
| <span class="title">Eclipse Che 7 Documentation</span> |
| <span class="version">Stable</span> |
| </div> |
| <ul class="components"> |
| <li class="component"> |
| <span class="title">devfile</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../../devfile/">master</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component is-current"> |
| <span class="title">Eclipse Che 7 Documentation</span> |
| <ul class="versions"> |
| <li class="version is-current is-latest"> |
| <a href="../../overview/introduction-to-eclipse-che/">Stable</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </aside> |
| </div> |
| <main class="article"> |
| <div class="toolbar" role="navigation"> |
| <button class="nav-toggle"></button> |
| <a href="../../overview/introduction-to-eclipse-che/" class="home-link"></a> |
| <nav class="breadcrumbs" aria-label="breadcrumbs"> |
| <ul> |
| <li><a href="../../overview/introduction-to-eclipse-che/">Eclipse Che 7 Documentation</a></li> |
| <li>Contributor Guide</li> |
| <li><a href="./">Developing Che-Theia plug-ins</a></li> |
| </ul> |
| </nav> |
| <div class="edit-this-page"><a href="https://github.com/eclipse/che-docs/edit/master/modules/contributor-guide/pages/developing-che-theia-plug-ins.adoc">Edit this Page</a></div> |
| </div> |
| <div class="content"> |
| <article class="doc"> |
| <h1 class="page">Developing Che-Theia plug-ins</h1> |
| <div class="sect1"> |
| <h2 id="bootstrapping-che-theia-plug-in-development-with-yeoman_developing-che-theia-plug-ins"><a class="anchor" href="#bootstrapping-che-theia-plug-in-development-with-yeoman_developing-che-theia-plug-ins"></a>Bootstrapping a Che-Theia plug-in development with Yeoman</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>There are two ways to scaffold a new plug-in development environment in Che-Theia:</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>Console plug-in generator (based on the Yeoman generator).</p> |
| </li> |
| <li> |
| <p><strong>Yeoman wizard</strong> (launched from the command palette).</p> |
| </li> |
| </ul> |
| </div> |
| <div class="sect2"> |
| <h3 id="list-of-available-plug-in-samples_developing-che-theia-plug-ins"><a class="anchor" href="#list-of-available-plug-in-samples_developing-che-theia-plug-ins"></a>List of available plug-in samples</h3> |
| <div class="paragraph"> |
| <p>The Che-Theia plug-in generator provides several predefined samples:</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p><strong>Hello World plug-in</strong>: The plug-in registers a new Che-Theia command. When the user launches this command, Che-Theia displays a notification with the <code>Hello World</code> message. The example illustrates how to define and use commands in Che-Theia.</p> |
| </li> |
| <li> |
| <p><strong>Skeleton plug-in</strong>: The plug-in prints the current Che-Theia window state in the browser log.</p> |
| </li> |
| <li> |
| <p><strong>Samples plug-in</strong>: The plug-in contains examples of how to use the Che-Theia API:</p> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>Commands sample: The plug-in shows how to define a Che-Theia command with arguments. Command arguments are useful when another plug-in needs to call a command with parameters.</p> |
| </li> |
| <li> |
| <p>Information message sample: An example of how to define and show a modal information message.</p> |
| </li> |
| <li> |
| <p>Quick-pick sample: An example of how to define a command list with items and a handler for a selected item.</p> |
| </li> |
| <li> |
| <p>Status-bar item sample: An example of how to apply information to the status bar. The status bar is a widget located at the bottom of the Che-Theia window (a footer).</p> |
| </li> |
| </ul> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="generating-plug-ins-overview_developing-che-theia-plug-ins"><a class="anchor" href="#generating-plug-ins-overview_developing-che-theia-plug-ins"></a>Overview of generating plug-ins</h3> |
| <div class="paragraph"> |
| <p>To simplify plug-in development, there is a plug-in generator (<code>@theia/generator-plugin</code>) for creating new plug-ins from scratch. The plug-in generator provides the <strong>Yeoman wizard</strong> for a step-by-step plug-in generation:</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Choose project name for the future plug-in.</p> |
| </li> |
| <li> |
| <p>Select plug-in type. The Che-Theia plug-in API has two plug-in types:</p> |
| <div class="openblock"> |
| <div class="content"> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>frontend: The plug-in works on the client side</p> |
| </li> |
| <li> |
| <p>back end: The plug-in works on the server side</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>During plug-in creation, you need to decide the purpose of the plug-in and, accordingly, select the plug-in type.</p> |
| </div> |
| </li> |
| <li> |
| <p>Select a plug-in sample.</p> |
| </li> |
| </ol> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="installing-the-plug-in-generator_developing-che-theia-plug-ins"><a class="anchor" href="#installing-the-plug-in-generator_developing-che-theia-plug-ins"></a>Installing the plug-in generator</h3> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Run the following command to install the plug-in generator:</p> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre>$ yarn global add yo @theia/generator-plugin</pre> |
| </div> |
| </div> |
| </li> |
| <li> |
| <p>Check that the <code>@theia/plugin</code> generator is available:</p> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre>$ yo --help</pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The command returns a list of pre-installed generators.</p> |
| </div> |
| </li> |
| </ol> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="generating-a-new-plug-in-in-the-console_developing-che-theia-plug-ins"><a class="anchor" href="#generating-a-new-plug-in-in-the-console_developing-che-theia-plug-ins"></a>Generating a new plug-in in the console</h3> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Create a new terminal inside your workspace using the <strong>Terminal</strong> menu, and run the plug-in generator:</p> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre>$ yo @theia/plugin</pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Alternatively, run <code>yo</code> without any parameters and select the <code>@theia/plugin</code> generator from the list of available generators.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yo-select-plug-in-generator.png"><img src="../_images/extensibility/yo-select-plug-in-generator.png" alt="yo select plug in generator"></a> |
| </div> |
| </div> |
| </li> |
| <li> |
| <p>Enter the information to configure the plug-in. For example:</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/launching-console-plug-in-generator.png"><img src="../_images/extensibility/launching-console-plug-in-generator.png" alt="launching console plug in generator"></a> |
| </div> |
| </div> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>When the plug-in is generated, it appears in the <strong>Files</strong> panel. The sample is already compiled and contains the plug-in binary file. In this example, the plug-in binary file is named <code>my_first_plugin.theia</code>.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="generating-a-new-plug-in-using-the-yeoman-wizard_developing-che-theia-plug-ins"><a class="anchor" href="#generating-a-new-plug-in-using-the-yeoman-wizard_developing-che-theia-plug-ins"></a>Generating a new plug-in using the Yeoman wizard</h3> |
| <div class="paragraph"> |
| <p>Che-theia provides the <code>Yeoman wizard</code> command for creating new plug-ins from the command palette.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>To launch the command palette, press <span class="keyseq"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd></span> (or <span class="keyseq"><kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd></span> on macOS).</p> |
| </li> |
| <li> |
| <p>Type <code>Yeom</code> to filter the commands. Select the <code>Yeoman Wizard</code> command.</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-wizard-launching.png"><img src="../_images/extensibility/yeoman-wizard-launching.png" alt="yeoman wizard launching"></a> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Note that launching the wizard may take a few seconds.</p> |
| </div> |
| </li> |
| <li> |
| <p>Enter the new project name.</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-wizard-choosing-plug-in-name.png"><img src="../_images/extensibility/yeoman-wizard-choosing-plug-in-name.png" alt="yeoman wizard choosing plug in name"></a> |
| </div> |
| </div> |
| </li> |
| <li> |
| <p>Select the desired plug-in type (client-side or server-side).</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-wizard-choosing-plug-in-type.png"><img src="../_images/extensibility/yeoman-wizard-choosing-plug-in-type.png" alt="yeoman wizard choosing plug in type"></a> |
| </div> |
| </div> |
| </li> |
| <li> |
| <p>Select the plug-in sample to use.</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-wizard-choosing-plug-in-sample.png"><img src="../_images/extensibility/yeoman-wizard-choosing-plug-in-sample.png" alt="yeoman wizard choosing plug in sample"></a> |
| </div> |
| </div> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>When the plug-in is generated, the <strong>Yeoman wizard</strong> displays a notification.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-wizard-plug-in-generated.png"><img src="../_images/extensibility/yeoman-wizard-plug-in-generated.png" alt="yeoman wizard plug in generated"></a> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The plug-in sample displays in the <strong>Files</strong> panel. Use the <strong>Output</strong> tab in the bottom panel to access logs for plug-in generation.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-wizard-logs.png"><img src="../_images/extensibility/yeoman-wizard-logs.png" alt="yeoman wizard logs"></a> |
| </div> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| The <strong>Yeoman wizard</strong> only works when a workspace is opened in Che-Theia. |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="developing-che-theia-plug-ins-using-che_developing-che-theia-plug-ins"><a class="anchor" href="#developing-che-theia-plug-ins-using-che_developing-che-theia-plug-ins"></a>Developing a Che-Theia plug-in using Che</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>This section describes how to set up an environment for developing the Che-Theia plug-ins in Eclipse Che.</p> |
| </div> |
| <div class="ulist"> |
| <div class="title">Prerequisites</div> |
| <ul> |
| <li> |
| <p>A running instance of Eclipse Che. To install an instance of Eclipse Che, see <a href="../../installation-guide/installing-che/" class="page">Installing Che</a>.</p> |
| </li> |
| <li> |
| <p><code>chectl</code> management tool is available. See <a href="../../installation-guide/using-the-chectl-management-tool/" class="page">Using the chectl management tool</a>.</p> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p><strong>Create a workspace for development.</strong> Che has dedicated stacks for plug-in development. In the <strong>Dashboard</strong>, click the <strong>Workspaces</strong> tab, and click the <b class="button">Add Workspace</b> button.</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/adding-workspace.png"><img src="../_images/extensibility/adding-workspace.png" alt="adding workspace"></a> |
| </div> |
| <div class="title">Figure 1. Adding a workspace</div> |
| </div> |
| </li> |
| <li> |
| <p>Select the <strong>Che 7.18 Dev</strong> stack, and click the <b class="button">CREATE & OPEN</b> button.</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/choosing-che-7-dev-stack.png"><img src="../_images/extensibility/choosing-che-7-dev-stack.png" alt="choosing che 7 dev stack"></a> |
| </div> |
| <div class="title">Figure 2. Choosing the 'Che 7.18 Dev' stack</div> |
| </div> |
| </li> |
| <li> |
| <p><strong>Generate a plug-in scaffold.</strong> The workspace created from this stack provides an easy way to scaffold a new plug-in. When the workspace is started and fully ready, execute the <strong>Yeoman Wizard</strong> from the command palette:</p> |
| <div class="olist loweralpha"> |
| <ol class="loweralpha" type="a"> |
| <li> |
| <p>Press <strong>F1</strong> or <span class="keyseq"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd></span> to invoke the command palette, and start typing the command name <code>Yeoman …​</code> (note that you can also use the keyboard to navigate through the offered commands).</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/launching-yeoman-wizard.png"><img src="../_images/extensibility/launching-yeoman-wizard.png" alt="launching yeoman wizard"></a> |
| </div> |
| <div class="title">Figure 3. Launching the Yeoman Wizard</div> |
| </div> |
| </li> |
| <li> |
| <p>Specify the following fields about the plug-in that you want to create:</p> |
| </li> |
| </ol> |
| </div> |
| </li> |
| </ol> |
| </div> |
| </li> |
| <li> |
| <p>plug-in name: For example, <code>my-first-plugin</code>.</p> |
| </li> |
| <li> |
| <p>plug-in type: Select <code>backend plug-in</code>.</p> |
| </li> |
| <li> |
| <p>plug-in template: Select the <code>Hello World plug-in</code>.</p> |
| <div class="paragraph"> |
| <p>A message confirming that the plug-in generation has been successful indicates creation of the plug-in.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/yeoman-successful.png"><img src="../_images/extensibility/yeoman-successful.png" alt="yeoman successful"></a> |
| </div> |
| <div class="title">Figure 4. Yeoman successfully generated a new plug-in</div> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Open the <strong>Files</strong> panel, to see the sources of the generated plug-in in the <code>src</code> directory.</p> |
| </li> |
| <li> |
| <p><strong>Build the plug-in.</strong> After the plug-in is created, build the plug-in:</p> |
| <div class="olist loweralpha"> |
| <ol class="loweralpha" type="a"> |
| <li> |
| <p>Open a new terminal in the development container (use <span class="keyseq"><kbd>Ctrl</kbd>+<kbd>`</kbd></span>, then select <code>ws/dev</code>).</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/open-terminal-in-container.png"><img src="../_images/extensibility/open-terminal-in-container.png" alt="open terminal in container"></a> |
| </div> |
| <div class="title">Figure 5. Opening a new terminal in the development container</div> |
| </div> |
| </li> |
| <li> |
| <p>In the terminal, go to the plug-in directory, and run the <code>yarn</code> command:</p> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre># cd my-first-plugin/ |
| # yarn</pre> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/building-plug-in-using-yarn.png"><img src="../_images/extensibility/building-plug-in-using-yarn.png" alt="building plug in using yarn"></a> |
| </div> |
| <div class="title">Figure 6. Building a Che-Theia plug-in using <code>yarn</code></div> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| The plug-in generator automatically builds the plug-in after its generation. |
| </td> |
| </tr> |
| </table> |
| </div> |
| </li> |
| </ol> |
| </div> |
| </li> |
| <li> |
| <p><strong>Run the plug-in.</strong> To see your plug-in in action in the IDE, use the <strong>Hosted mode</strong> to start a new IDE instance and to install the plug-in in it. You now have two IDEs running: one for developing your plug-in and one for testing it.</p> |
| <div class="olist loweralpha"> |
| <ol class="loweralpha" type="a"> |
| <li> |
| <p>In the command palette, run: <code>Hosted Plugin: Start Instance</code> command (press <kbd>F1</kbd>, and type the command).</p> |
| </li> |
| <li> |
| <p>Select the path to the root directory of the plug-in in your workspace.</p> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| If you get a warning that your browser prevented the opening of a new tab, click the <b class="button">Open</b> button in the dialog box. A new tab with another Che-Theia instance (with the developed plug-in loaded) is opened. |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/running-plug-in-hosted-mode.gif"><img src="../_images/extensibility/running-plug-in-hosted-mode.gif" alt="running plug in hosted mode"></a> |
| </div> |
| <div class="title">Figure 7. Running a Che-Theia plug-in in Hosted mode</div> |
| </div> |
| </li> |
| </ol> |
| </div> |
| </li> |
| <li> |
| <p><strong>Debug the plug-in.</strong></p> |
| <div class="olist loweralpha"> |
| <ol class="loweralpha" type="a"> |
| <li> |
| <p>In the source code of your plug-in, set a breakpoint by clicking behind a line number (in the editor gutter).</p> |
| </li> |
| <li> |
| <p>Using the command palette, stop your <strong>Hosted Plug-in</strong> instance (if any) by running the <code>Hosted Plugin: Stop Instance</code> command.</p> |
| </li> |
| <li> |
| <p>Start the <strong>Hosted Plug-in</strong> instance again in the debugging mode by running the <code>Hosted Plugin: Debug Instance</code> command.</p> |
| </li> |
| <li> |
| <p>Switch to the <strong>Hosted Instance</strong> tab and perform the required actions to reach the code with the breakpoint.</p> |
| </li> |
| <li> |
| <p>Go back to the <strong>Main Che-Theia</strong> window, and use the <strong>Debug</strong> panel as you need.</p> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="../_images/extensibility/debugging-plug-ins.gif"><img src="../_images/extensibility/debugging-plug-ins.gif" alt="debugging plug ins"></a> |
| </div> |
| <div class="title">Figure 8. Debugging a Che-Theia plug-in</div> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| When developing a frontend plug-in, debug it using your browser’s Developer Tools option. |
| </td> |
| </tr> |
| </table> |
| </div> |
| </li> |
| </ol> |
| </div> |
| </li> |
| </ol> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </article> |
| <aside class="toc sidebar" data-title="Contents" data-levels="2"> |
| <div class="toc-menu"></div> |
| </aside> |
| </div> |
| </main> |
| </div> |
| <footer class="footer"> |
| <div><a href="https://www.eclipse.org" target="_blank">Eclipse Foundation</a> | |
| <a href="https://www.eclipse.org/legal/privacy.php" target="_blank">Privacy Policy</a> | |
| <a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank">Terms of Use</a> | |
| <a href="https://www.eclipse.org/legal/epl-2.0/" target="_blank">Eclipse Public License</a> | |
| <a href="https://www.eclipse.org/legal" target="_blank">Legal Resources</a></div> |
| </footer> |
| |
| <script src="../../../_/js/site.js"></script> |
| <script async src="../../../_/js/vendor/highlight.js"></script> |
| </body> |
| </html> |
