Google chrome 在chrome中查看源代码

我是一个学习代码的新手，目前我在学习treehouse等资源方面做得很好

不过，我也想向其他开发者学习。我发现了一些网站，我对他们的建设感兴趣

我想知道是否有任何方法可以查看编写时的源代码。 例如，当我通过单击鼠标右键查看源代码，然后查看源代码时，所有代码都显示在一行中，挤压在一起，而不是分散开来，使代码难以阅读

这是我所说的一个例子；

我想知道是否有一个附加组件或插件将分开

---

将代码分成易于阅读的块，以便我可以从中学习。

右键单击页面中的一个元素并选择“Inspect”以查看呈现的DOM-这与源代码不同，但可能是一个更好的指示，因为（对于现代网站）源代码可能是由原始HTML和JS组合而成的

当你查看JS或CSS时，在面板左下角寻找一个

{}

图标-这将很好地打印JS，同时仍然允许你一步一步地浏览

您也可以将其用于CSS：

• 去
• 打开Chrome开发工具（CTRL+SHIFT+I）
• 单击工具顶部的“源”
• 从左侧树视图中选择CSS
• 单击左下角的

  {}

---

您可以将代码粘贴到此网站并“美化”它。Chrome浏览器中还提到了一些插件/扩展。

在“开发工具”窗口中，如果您单击“源”选项卡并单击左侧的文件，然后单击“代码”窗口底部的花括号，就会弹出该窗口，并将其转换为可读格式