代码

每个应用都是真正的 React 代码，编辑器顶部与 Preview 并排的 Code 会显示全部代码。你从来不必打开它。它是为了你想看看某个东西是怎么做的、指出它，或者自己修改它的时候准备的。

Explorer

在左侧：

• Search code 在每个文件中查找某个词。
• Open editors 是你打开的文件，以标签页的形式显示。
• Files 是整个应用：App.js、components 中的页面和组件，以及 lib 中的数据。
• Images 是应用使用的图片，并显示数量。点击一张可以查看大图：Draw 会用红色在上面标记，用来指出某处，Add to chat 会把它随你的下一条消息一起发送。

编辑器左上角的按钮可以隐藏 Explorer，腾出更多空间。

让聊天指向代码

你不必描述某个东西在哪里。

• 代码上方的 Reference file 会把整个文件附加到你在聊天中的下一条消息。
• 一行左侧的 + 会附加这一行。选中多行可以把它们全部附加。

之后，一个简短的请求就够了：“列表为空时，这里的行为不对”。

找到某个元素所在的行

右上角的两个窗格，即 Split view，会把预览显示在代码旁边。在电脑上，打开 Code 时它就在那里；手机一次只放得下一个窗格。打开它会让聊天变窄以腾出空间，关闭后聊天会恢复原来的宽度，所以你仍然可以询问你正在读的内容。

打开 Split view 后，它旁边会出现一个指针按钮（Click an element to find it in the code）。打开它，在预览中点击就不再执行应用原本的操作：而是打开生成这个元素的文件，并定位到它所在的行。关闭它就可以重新正常使用预览。从“那个标题”到它背后的代码，这是最快的路径，而且可以用该行左侧的 + 把这一行附加到你的下一条消息。

手动编辑

在付费套餐中，代码由你来修改：直接在里面输入，底部栏中的 Auto-save on 表示它会随着你的输入保存。预览会跟着更新。Copy code 会复制你正在看的文件。

在免费套餐中，代码可以阅读、搜索和指出，但不能修改或复制。同一栏中的 Upgrade to edit 就是在说明这一点。