{"id":14053,"date":"2018-01-22T09:07:55","date_gmt":"2018-01-22T09:07:55","guid":{"rendered":"https:\/\/coherent-labs.com\/?p=14053"},"modified":"2018-01-26T16:09:36","modified_gmt":"2018-01-26T16:09:36","slug":"the-new-gt-debugger-overview","status":"publish","type":"post","link":"https:\/\/coherent-labs.com\/posts\/the-new-gt-debugger-overview\/","title":{"rendered":"The new GT Debugger overview"},"content":{"rendered":"

Coherent GT 2.0 supports the whole WebKit Inspector protocol and allows for live viewing, editing and debugging of the UI even when the client application is running. This increases the productivity of UI programmers and designers immensely as they can directly work on the live interface without stopping the game, recompiling or restarting. In this tutorial, we will look at the new features of the GT 2.0 Debugger.<\/p>\n

Let’s start with the overview, open a sample with GT 2.0. Open the new Debugger and navigate to port `http:\/\/127.0.0.1:19999`.<\/p>\n

\"C<\/p>\n

\u0422he Debugger’s navigation bar consists of seven tabs. You can close a tab from its exit button or restore it from the button with the + sign. At the end of the navigation, there is a button that provides quick access to your Debugger settings. Since the Debugger has a completely new look, there are tooltips that appear when you hover over the icons, to help you get used to the new interface easier.<\/p>\n

One of the most exciting new features is the ability to open the Debugger in Inspect Element mode by pressing \"inspect\u00a0 button or using the shortcut\u00a0Ctrl + Shift + C<\/code>. While you are in this mode, hover over an element in the scene. The element will automatically be highlighted in the Elements panel. Click on the element to exit Inspect mode while keeping the element highlighted within the Elements tab.<\/p>\n

Now let’s take a look at each one of the tabs.<\/p>\n

Elements<\/strong><\/h3>\n

The page with all its current state is shown. You can hover over elements and they will be highlighted in the scene. On the right side of the Debugger, there is a menu that allows you to inspect the DOM nodes, the CSS styles (you can filter the computed styles, the rules or the visual styles) and the Layers. All properties of the elements are editable and changes will be immediately visualized in the live application. If you want to change a DOM element’s color instantly, go to the Styles Rules view and click on the color’s value sample. A color picker popup will appear, enabling you to change the color. It works properly with RGBA, HSLA and HEX values.<\/p>\n

\"User<\/p>\n

From the Elements tab, you can check what gets re-drawn by pressing the following button (highlighted with red):<\/p>\n

\"UI<\/p>\n

Coherent GT re-draws only parts of the View that have changed between frames. It is very important to keep re-drawn regions to the bare minimum. Redundant changes in the DOM like setting CSS styles with tiny differences can cause no visual change but still trigger a re-paint. Users should regularly check the behavior of the page and make sure that no redundant and avoidable re-draws are triggered. With this button you can check visually what gets re-drawn (the elements with red borders):<\/p>\n

\"UI<\/p>\n

You can also check the UI Layers by pressing the following button (highlighted with red):<\/p>\n

\"UI<\/p>\n

Some elements in the page will get their own backing layer (the elements with gray borders):<\/p>\n

\"UI<\/p>\n

You can see what layers are currently on-screen and their re-paint counters and sizes from the Layers menu on the right:<\/p>\n

\"UI<\/p>\n

Network<\/strong><\/h3>\n

Here you can measure the network performance. This tab records information about each network operation, including detailed timing data, HTTP request and response headers and more. The Requests table displays the following columns:<\/p>\n