Navigatе Your Code

Filter by IDE
Select the AppBuilder client you are currently using for development.

IDE

You can quickly navigate to different parts of your code, find and highlight symbol usages, definitions, types, members, errors and so on.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app.

Procedure

In-Browser

  • If you know the complete or partial name of a file that you want to open, you can search and navigate to it.
    To speed up the search process, you can use camelCase.
    1. Press Ctrl+Alt+G (on Windows systems) or Cmd+Alt+G (on macOS systems).
    2. Type the file name.
      The in-browser client dynamically lists suggestions that match your search criteria as you type.
    3. Press Enter or click a suggested file in the pop-up menu.
  • To locate the currently open and active file in the Project Navigator, press Shift+Alt+L.

In larger files, you can speed up editing by navigating to a selected line instead of scrolling through the code.

  • Navigate to line in the currently open and active file.
    1. Press Ctrl+G on Windows systems or Cmd+G on macOS systems.
    2. Type the line number to which you want to navigate and press Enter.
  • Navigate to line in any file.
    1. Press Ctrl+Alt+G on Windows systems or Cmd+Alt+G on macOS systems.
    2. Type the name of the file and the line number separated by a colon (:). For example: index.html:10
    3. Press Enter.

Universal

  • If you know the complete or partial name of a file that you want to open, you can search and navigate to it.
    To speed up the search process, you can use camelCase.
    1. Press Ctrl+Alt+G (on Windows systems) or Cmd+Alt+G (on macOS systems).
    2. Type the file name.
      The in-browser client dynamically lists suggestions that match your search criteria as you type.
    3. Press Enter or click a suggested file in the pop-up menu.
  • To locate the currently open and active file in the Project Navigator, press Shift+Alt+L.

In larger files, you can speed up editing by navigating to a selected line instead of scrolling through the code.

  • Navigate to line in the currently open and active file.
    1. Press Ctrl+G (on Windows systems) or Cmd+G (on macOS systems).
    2. Type the line number to which you want to navigate and press Enter.
  • Navigate to line in any file.
    1. Press Ctrl+Alt+G (on Windows systems) or Cmd+Alt+G (on macOS systems).
    2. Type the name of the file and the line number separated by a colon (:). For example: index.html:10
    3. Press Enter.

Windows

If you know the complete or partial name of a file that you want to open, you can search and navigate to it.

To speed up the search process, you can use camelCase.

  1. Press Ctrl+Alt+G.
  2. Type the file name.
    The classic Windows desktop client dynamically lists suggestions that match your search criteria as you type.
  3. Press Enter or click a suggested file in the pop-up menu.

In larger files, you can speed up editing by navigating to a selected line instead of scrolling through the code.

  1. From the Project Navigator, open the file that you want to edit.
  2. Click anywhere in the code editor.
  3. Press Ctrl+G.
  4. Type the line number to which you want to navigate and press Enter.

This operation is available only for JavaScript and CSS code.

You can navigate to the definition of a selected identifier. You can navigate to the definitions of types, methods, fields and local variables.

You can use camelCase.

  1. From the Project Navigator, open the file that contains the identifier.
  2. Select the identifier.
  3. Press Ctrl+` and from the pop-up menu, select NGo To Definition.
    AppBuilder navigates to the definition and highlights it. If the identifier is defined in another file, AppBuilder opens the file in the code editor.

This operation is available only for JavaScript code.

You can navigate to where a namespace, type, method, property, field or local variable is used in your app.

  • Navigate to usage.
    1. Select the identifier for which you want to find usages.
    2. Press Ctrl+` and from the pop-up menu, select NFind Usages.
      The Find Results pane expands and lists all usages. If your app contains a single usage of the identifier, AppBuilder navigates to it and highlights it.
  • To navigate to a usage of a type member, search for extended usages.
    1. Select the type member for which you want to find usages.
    2. Press Ctrl+` and from the pop-up menu, select NFind Extended Usages.
      The Find Results pane expands and lists all usages. If your app contains a single usage of the type member, AppBuilder navigates to it and highlights it.
  • To navigate to usages across the open file more quickly, highlight the usages in the file.
    1. Select the identifier for which you want to find usages.
    2. Press Ctrl+` and from the pop-up menu, select NHighlight Usages in File.
      AppBuilder highlights instances of the identifier in the code editor and in the Marker bar.
  • To navigate to usages across the app more quickly, highlight the usages in the app.
    1. Select the identifier for which you want to find usages.
    2. Press Ctrl+` and from the pop-up menu, select NHighlight Usages.
      AppBuilder highlights instances of the identifier in the code editor and in the Marker bar.
  • Navigate between highlighted usages.
    • To go to previous usage, press Ctrl+Alt+Up Arrow.
    • To go to next usage, pres Ctrol+Alt+Down Arrow.
  • To discard usage highlights, press Esc.

This operation is available only for JavaScript code.

You can search all JS files in your app for a symbol or a string of symbols.

You can use camelCase.

  1. Press Ctrl+Alt+S.
  2. Type the symbol.
    AppBuilder filters the search results as you type.

    Go To Symbol

  3. Press Enter or click a suggested string in the pop-up menu.
    If the file that contains the selected search result is not already open, AppBuilder opens the file and highlights the expression that contains the symbol or string of symbols.

This operation is available only for JavaScript code.

You can search a JS files for a member.

You can use camelCase.

  1. From the Project Navigator, open the file that contains the member.
  2. Press Ctrl+` and from the pop-up menu, select NGo To Member.
  3. Start typing the member name.
    AppBuilder filters the search results as you type.

    Go To Member

  4. Press Enter or click a suggested member in the pop-up menu.
    If the file that contains the selected search result is not already open, AppBuilder opens it and highlights the member.

Visual Studio

To navigate your code, apply your preferred Microsoft Visual Studio approach, extension or tool or install and use the Telerik JustCode extension. For more information, see the Telerik JustCode Manual.

CLI

To navigate your code, apply the approach or tool available for your current IDE.

Next Steps

Write your code.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.