Mailspring/packages/client-app/docs/guides/Debugging.html

1425 lines
37 KiB
HTML

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Debugging Nylas Mail · Nylas Mail Plugin SDK</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../styles/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="Database.html" />
<link rel="prev" href="Architecture.html" />
<link rel="shortcut icon" href='../img/favicon.png' type="image/x-icon">
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" >
<span>
Nylas Mail SDK Guides
</span>
</li>
<li class="chapter " data-level="1.2" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.3" data-path="GettingStarted.html">
<a href="GettingStarted.html">
Getting Started
</a>
</li>
<li class="chapter " data-level="1.4" data-path="GettingStarted-2.html">
<a href="GettingStarted-2.html">
Getting Started Part 2
</a>
</li>
<li class="chapter " data-level="1.5" data-path="PackageOverview.html">
<a href="PackageOverview.html">
Building a Package
</a>
</li>
<li class="chapter " data-level="1.6" data-path="InterfaceConcepts.html">
<a href="InterfaceConcepts.html">
Interface Concepts
</a>
</li>
<li class="chapter " data-level="1.7" data-path="React.html">
<a href="React.html">
UI Components
</a>
</li>
<li class="chapter " data-level="1.8" data-path="Architecture.html">
<a href="Architecture.html">
Application Architecture
</a>
</li>
<li class="chapter active" data-level="1.9" data-path="Debugging.html">
<a href="Debugging.html">
Debugging Nylas Mail
</a>
</li>
<li class="chapter " data-level="1.10" data-path="Database.html">
<a href="Database.html">
Accessing the Database
</a>
</li>
<li class="chapter " data-level="1.11" data-path="ComposerExtensions.html">
<a href="ComposerExtensions.html">
Extending the Composer
</a>
</li>
<li class="chapter " data-level="1.12" data-path="WritingSpecs.html">
<a href="WritingSpecs.html">
Writing Tests
</a>
</li>
<li class="chapter " data-level="1.13" data-path="IntegrationTesting.html">
<a href="IntegrationTesting.html">
Integration Testing
</a>
</li>
<li class="chapter " data-level="1.14" data-path="Windows.html">
<a href="Windows.html">
Developing on Windows
</a>
</li>
<li class="chapter " data-level="1.15" data-path="FAQ.html">
<a href="FAQ.html">
FAQ
</a>
</li>
<li class="header">Full Class Reference</li>
<li class="chapter " data-level="2.1" >
<span>
General
</span>
<ul class="articles">
<li class="chapter " data-level="2.1.1" data-path="../classes/Actions.html">
<a href="../classes/Actions.html">
Actions
</a>
</li>
<li class="chapter " data-level="2.1.2" data-path="../classes/BufferedProcess.html">
<a href="../classes/BufferedProcess.html">
BufferedProcess
</a>
</li>
<li class="chapter " data-level="2.1.3" data-path="../classes/ChangeFolderTask.html">
<a href="../classes/ChangeFolderTask.html">
ChangeFolderTask
</a>
</li>
<li class="chapter " data-level="2.1.4" data-path="../classes/ChangeLabelsTask.html">
<a href="../classes/ChangeLabelsTask.html">
ChangeLabelsTask
</a>
</li>
<li class="chapter " data-level="2.1.5" data-path="../classes/ChangeMailTask.html">
<a href="../classes/ChangeMailTask.html">
ChangeMailTask
</a>
</li>
<li class="chapter " data-level="2.1.6" data-path="../classes/Color.html">
<a href="../classes/Color.html">
Color
</a>
</li>
<li class="chapter " data-level="2.1.7" data-path="../classes/Config.html">
<a href="../classes/Config.html">
Config
</a>
</li>
<li class="chapter " data-level="2.1.8" data-path="../classes/Contenteditable.html">
<a href="../classes/Contenteditable.html">
Contenteditable
</a>
</li>
<li class="chapter " data-level="2.1.9" data-path="../classes/KeyCommandsRegion.html">
<a href="../classes/KeyCommandsRegion.html">
KeyCommandsRegion
</a>
</li>
<li class="chapter " data-level="2.1.10" data-path="../classes/NylasEnvConstructor.html">
<a href="../classes/NylasEnvConstructor.html">
NylasEnvConstructor
</a>
</li>
<li class="chapter " data-level="2.1.11" data-path="../classes/QueryResultSet.html">
<a href="../classes/QueryResultSet.html">
QueryResultSet
</a>
</li>
<li class="chapter " data-level="2.1.12" data-path="../classes/QuerySubscriptionPool.html">
<a href="../classes/QuerySubscriptionPool.html">
QuerySubscriptionPool
</a>
</li>
<li class="chapter " data-level="2.1.13" data-path="../classes/StyleManager.html">
<a href="../classes/StyleManager.html">
StyleManager
</a>
</li>
<li class="chapter " data-level="2.1.14" data-path="../classes/Task.html">
<a href="../classes/Task.html">
Task
</a>
</li>
<li class="chapter " data-level="2.1.15" data-path="../classes/TaskQueueStatusStore.html">
<a href="../classes/TaskQueueStatusStore.html">
TaskQueueStatusStore
</a>
</li>
<li class="chapter " data-level="2.1.16" data-path="../classes/ThemeManager.html">
<a href="../classes/ThemeManager.html">
ThemeManager
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.2" >
<span>
Component Kit
</span>
<ul class="articles">
<li class="chapter " data-level="2.2.1" data-path="../classes/EventedIFrame.html">
<a href="../classes/EventedIFrame.html">
EventedIFrame
</a>
</li>
<li class="chapter " data-level="2.2.2" data-path="../classes/Flexbox.html">
<a href="../classes/Flexbox.html">
Flexbox
</a>
</li>
<li class="chapter " data-level="2.2.3" data-path="../classes/InjectedComponent.html">
<a href="../classes/InjectedComponent.html">
InjectedComponent
</a>
</li>
<li class="chapter " data-level="2.2.4" data-path="../classes/InjectedComponentSet.html">
<a href="../classes/InjectedComponentSet.html">
InjectedComponentSet
</a>
</li>
<li class="chapter " data-level="2.2.5" data-path="../classes/Menu.html">
<a href="../classes/Menu.html">
Menu
</a>
</li>
<li class="chapter " data-level="2.2.6" data-path="../classes/MenuItem.html">
<a href="../classes/MenuItem.html">
MenuItem
</a>
</li>
<li class="chapter " data-level="2.2.7" data-path="../classes/MenuNameEmailItem.html">
<a href="../classes/MenuNameEmailItem.html">
MenuNameEmailItem
</a>
</li>
<li class="chapter " data-level="2.2.8" data-path="../classes/MultiselectActionBar.html">
<a href="../classes/MultiselectActionBar.html">
MultiselectActionBar
</a>
</li>
<li class="chapter " data-level="2.2.9" data-path="../classes/MultiselectList.html">
<a href="../classes/MultiselectList.html">
MultiselectList
</a>
</li>
<li class="chapter " data-level="2.2.10" data-path="../classes/ResizableRegion.html">
<a href="../classes/ResizableRegion.html">
ResizableRegion
</a>
</li>
<li class="chapter " data-level="2.2.11" data-path="../classes/RetinaImg.html">
<a href="../classes/RetinaImg.html">
RetinaImg
</a>
</li>
<li class="chapter " data-level="2.2.12" data-path="../classes/Spinner.html">
<a href="../classes/Spinner.html">
Spinner
</a>
</li>
<li class="chapter " data-level="2.2.13" data-path="../classes/UnsafeComponent.html">
<a href="../classes/UnsafeComponent.html">
UnsafeComponent
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.3" >
<span>
Extensions
</span>
<ul class="articles">
<li class="chapter " data-level="2.3.1" data-path="../classes/ComposerExtension.html">
<a href="../classes/ComposerExtension.html">
ComposerExtension
</a>
</li>
<li class="chapter " data-level="2.3.2" data-path="../classes/ContenteditableExtension.html">
<a href="../classes/ContenteditableExtension.html">
ContenteditableExtension
</a>
</li>
<li class="chapter " data-level="2.3.3" data-path="../classes/DraftStoreExtension.html">
<a href="../classes/DraftStoreExtension.html">
DraftStoreExtension
</a>
</li>
<li class="chapter " data-level="2.3.4" data-path="../classes/MessageStoreExtension.html">
<a href="../classes/MessageStoreExtension.html">
MessageStoreExtension
</a>
</li>
<li class="chapter " data-level="2.3.5" data-path="../classes/MessageViewExtension.html">
<a href="../classes/MessageViewExtension.html">
MessageViewExtension
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.4" >
<span>
Models
</span>
<ul class="articles">
<li class="chapter " data-level="2.4.1" data-path="../classes/Contact.html">
<a href="../classes/Contact.html">
Contact
</a>
</li>
<li class="chapter " data-level="2.4.2" data-path="../classes/Message.html">
<a href="../classes/Message.html">
Message
</a>
</li>
<li class="chapter " data-level="2.4.3" data-path="../classes/Model.html">
<a href="../classes/Model.html">
Model
</a>
</li>
<li class="chapter " data-level="2.4.4" data-path="../classes/Thread.html">
<a href="../classes/Thread.html">
Thread
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.5" >
<span>
Stores
</span>
<ul class="articles">
<li class="chapter " data-level="2.5.1" data-path="../classes/AccountStore.html">
<a href="../classes/AccountStore.html">
AccountStore
</a>
</li>
<li class="chapter " data-level="2.5.2" data-path="../classes/ComponentRegistry.html">
<a href="../classes/ComponentRegistry.html">
ComponentRegistry
</a>
</li>
<li class="chapter " data-level="2.5.3" data-path="../classes/ContactStore.html">
<a href="../classes/ContactStore.html">
ContactStore
</a>
</li>
<li class="chapter " data-level="2.5.4" data-path="../classes/FocusedContentStore.html">
<a href="../classes/FocusedContentStore.html">
FocusedContentStore
</a>
</li>
<li class="chapter " data-level="2.5.5" data-path="../classes/TaskQueue.html">
<a href="../classes/TaskQueue.html">
TaskQueue
</a>
</li>
<li class="chapter " data-level="2.5.6" data-path="../classes/WorkspaceStore.html">
<a href="../classes/WorkspaceStore.html">
WorkspaceStore
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.6" >
<span>
Database
</span>
<ul class="articles">
<li class="chapter " data-level="2.6.1" data-path="../classes/Attribute.html">
<a href="../classes/Attribute.html">
Attribute
</a>
</li>
<li class="chapter " data-level="2.6.2" data-path="../classes/AttributeBoolean.html">
<a href="../classes/AttributeBoolean.html">
AttributeBoolean
</a>
</li>
<li class="chapter " data-level="2.6.3" data-path="../classes/AttributeCollection.html">
<a href="../classes/AttributeCollection.html">
AttributeCollection
</a>
</li>
<li class="chapter " data-level="2.6.4" data-path="../classes/AttributeDateTime.html">
<a href="../classes/AttributeDateTime.html">
AttributeDateTime
</a>
</li>
<li class="chapter " data-level="2.6.5" data-path="../classes/AttributeJoinedData.html">
<a href="../classes/AttributeJoinedData.html">
AttributeJoinedData
</a>
</li>
<li class="chapter " data-level="2.6.6" data-path="../classes/AttributeNumber.html">
<a href="../classes/AttributeNumber.html">
AttributeNumber
</a>
</li>
<li class="chapter " data-level="2.6.7" data-path="../classes/AttributeObject.html">
<a href="../classes/AttributeObject.html">
AttributeObject
</a>
</li>
<li class="chapter " data-level="2.6.8" data-path="../classes/AttributeServerId.html">
<a href="../classes/AttributeServerId.html">
AttributeServerId
</a>
</li>
<li class="chapter " data-level="2.6.9" data-path="../classes/AttributeString.html">
<a href="../classes/AttributeString.html">
AttributeString
</a>
</li>
<li class="chapter " data-level="2.6.10" data-path="../classes/DatabaseStore.html">
<a href="../classes/DatabaseStore.html">
DatabaseStore
</a>
</li>
<li class="chapter " data-level="2.6.11" data-path="../classes/Matcher.html">
<a href="../classes/Matcher.html">
Matcher
</a>
</li>
<li class="chapter " data-level="2.6.12" data-path="../classes/ModelQuery.html">
<a href="../classes/ModelQuery.html">
ModelQuery
</a>
</li>
<li class="chapter " data-level="2.6.13" data-path="../classes/SortOrder.html">
<a href="../classes/SortOrder.html">
SortOrder
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.7" >
<span>
Drafts
</span>
<ul class="articles">
<li class="chapter " data-level="2.7.1" data-path="../classes/DraftChangeSet.html">
<a href="../classes/DraftChangeSet.html">
DraftChangeSet
</a>
</li>
<li class="chapter " data-level="2.7.2" data-path="../classes/DraftEditingSession.html">
<a href="../classes/DraftEditingSession.html">
DraftEditingSession
</a>
</li>
<li class="chapter " data-level="2.7.3" data-path="../classes/DraftStore.html">
<a href="../classes/DraftStore.html">
DraftStore
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.8" >
<span>
NylasEnv
</span>
<ul class="articles">
<li class="chapter " data-level="2.8.1" data-path="../classes/PackageManager.html">
<a href="../classes/PackageManager.html">
PackageManager
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.9" >
<span>
Atom
</span>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Debugging Nylas Mail</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="debugging-nylas-mail"><a name="debugging-nylas-mail" class="plugin-anchor" href="#debugging-nylas-mail"><i class="fa fa-link" aria-hidden="true"></i></a>Debugging Nylas Mail</h1>
<h3 id="chromium-devtools"><a name="chromium-devtools" class="plugin-anchor" href="#chromium-devtools"><i class="fa fa-link" aria-hidden="true"></i></a>Chromium DevTools</h3>
<p>Nylas Mail is built on top of Electron, which runs the latest version of Chromium (at the time of writing, Chromium 43). You can access the standard <a href="https://developer.chrome.com/devtools" target="_blank">Chrome DevTools</a> using the <code>Command-Option-I</code> (<code>Ctrl-Shift-I</code> on Windows/Linux) keyboard shortcut, including the Debugger, Profiler, and Console. You can find extensive information about the Chromium DevTools on <a href="https://developer.chrome.com/devtools" target="_blank">developer.chrome.com</a>.</p>
<p>Here are a few hidden tricks for getting the most out of the Chromium DevTools:</p>
<ul>
<li><p>You can use <code>Command-P</code> to &quot;Open Quickly&quot;, jumping to a particular source file from any tab.</p>
</li>
<li><p>You can set breakpoints by clicking the line number gutter while viewing a source file.</p>
</li>
<li><p>While on a breakpoint, you can toggle the console panel by pressing <code>Esc</code> and type commands which are executed in the current scope.</p>
</li>
<li><p>While viewing the DOM in the <code>Elements</code> panel, typing <code>$0</code> on the console refers to the currently selected DOM node.</p>
</li>
</ul>
<h3 id="nylas-developer-panel"><a name="nylas-developer-panel" class="plugin-anchor" href="#nylas-developer-panel"><i class="fa fa-link" aria-hidden="true"></i></a>Nylas Developer Panel</h3>
<p>If you choose <code>Developer &gt; Show Activity Window</code> from the menu, you can see detailed logs of the requests, tasks, and streaming updates processed by Nylas Mail.</p>
<p>The Developer Panel provides three views which you can click to activate:</p>
<ul>
<li><p><code>Tasks</code>: This view allows you to inspect the {TaskQueue} and see the what tasks are pending and complete. Click a task to see its JSON representation and inspect it&apos;s values, including the last error it encountered.</p>
</li>
<li><p><code>Delta Streaming</code>: This view allows you to see the streaming updates from the Nylas API that the app has received. You can click individual updates to see the exact JSON that was consumed by the app, and search in the lower left for updates pertaining to an object ID or type.</p>
</li>
<li><p><code>Requests</code>: This view shows the requests the app has made to the Nylas API in <code>curl</code>-equivalent form. (The app does not actually make <code>curl</code> requests). You can click &quot;Copy&quot; to copy a <code>curl</code> command to the clipboard, or &quot;Run&quot; to execute it in a new Terminal window.</p>
</li>
</ul>
<p>The Developer Panel also allows you to toggle &quot;View Component Regions&quot;. Turning on component regions adds a red border to areas of the app that render dynamically injected components, and shows the props passed to React components in each one. See {react} for more information.</p>
<h3 id="the-development-workflow"><a name="the-development-workflow" class="plugin-anchor" href="#the-development-workflow"><i class="fa fa-link" aria-hidden="true"></i></a>The Development Workflow</h3>
<p>If you&apos;re debugging a package, you&apos;ll be modifying your code and re-running Nylas Mail over and over again. There are a few things you can do to make this development workflow less time consuming:</p>
<ul>
<li><p><strong>Inline Changes</strong>: Using the Chromium DevTools, you can change the contents of your coffeescript and javascript source files, type <code>Command-S</code> to save, and hot-swap the code. This makes it easy to test small adjustments to your code without re-launching Nylas Mail.</p>
</li>
<li><p><strong>View &gt; Refresh</strong>: From the View menu, choose &quot;Refresh&quot; to reload the Nylas Mail window just like a page in your browser. Refreshing is faster than restarting the app and allows you to iterate more quickly.</p>
<blockquote>
<p>Note: A bug in Electron causes the Chromium DevTools to become detached if you refresh the app often. If you find that Chromium is not stopping at your breakpoints, quit Nylas Mail and re-launch it.</p>
</blockquote>
</li>
</ul>
<p>In the future, we&apos;ll support much richer hot-reloading of plugin components and code. Stay tuned!</p>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="Architecture.html" class="navigation navigation-prev " aria-label="Previous page: Application Architecture">
<i class="fa fa-angle-left"></i>
</a>
<a href="Database.html" class="navigation navigation-next " aria-label="Next page: Accessing the Database">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Debugging Nylas Mail","level":"1.9","depth":1,"next":{"title":"Accessing the Database","level":"1.10","depth":1,"path":"guides/Database.md","ref":"guides/Database.md","articles":[]},"previous":{"title":"Application Architecture","level":"1.8","depth":1,"path":"guides/Architecture.md","ref":"guides/Architecture.md","articles":[]},"dir":"ltr"},"config":{"plugins":["search","lunr","-fontsettings","-sharing","anchors","github","editlink","favicon"],"root":"./docs_src","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"editlink":{"label":"Edit This Page","multilingual":false,"base":"https://github.com/nylas/nylas-mail-docs/tree/master"},"github":{"url":"https://github.com/nylas/nylas-mail-docs"},"favicon":{"shortcut":"/img/favicon.png"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"anchors":{},"highlight":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Nylas Mail Plugin SDK","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"3.2.2"},"file":{"path":"guides/Debugging.md","mtime":"2017-01-30T09:55:21.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-30T10:28:53.038Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-editlink/plugin.js"></script>
</body>
</html>