sublime text不能直接运行网页代码，需用浏览器预览。1. 在sublime中编写html、css和JavaScript代码并保存为.html文件；2. 双击该文件用默认浏览器打开以查看网页内容；3. 可安装livereload或browsersync插件实现自动刷新；4. 调试javascript时使用浏览器开发者工具设置断点或输出console.log；5. 利用sublime的代码片段功能提升html编写效率，通过新建.snippet文件定义常用代码块并快速插入。
sublime text本身不是一个网页浏览器，所以它不能直接“执行”网页代码，而是需要借助浏览器来预览和运行。简单来说，你需要先用Sublime写好HTML、css和JavaScript代码，然后保存成文件，最后用浏览器打开这些文件。
解决方案
-
编写代码： 在Sublime Text中编写HTML、CSS和JavaScript代码。例如，创建一个名为index.html的文件，输入基本的HTML结构。
立即学习“前端免费学习笔记（深入）”；
-
保存文件： 将文件保存为.html格式。确保文件扩展名正确，这会告诉你的操作系统这是一个HTML文件。
-
浏览器预览： 找到你保存的.html文件，双击它。你的默认浏览器会自动打开这个文件，并显示网页内容。
-
实时预览（可选）： 如果你想在修改代码后立即看到效果，可以安装Sublime Text的插件，例如LiveReload或BrowserSync。这些插件可以监测文件变化，并在你保存文件时自动刷新浏览器。
Sublime Text运行HTML代码的常见问题及解决方法
初学者经常遇到的问题是，直接在Sublime Text里按Ctrl+B（或者Cmd+B在Mac上）尝试运行HTML代码。这通常只会显示HTML源代码，而不是渲染后的网页。这是因为Sublime Text默认的构建系统是用来运行脚本语言的，比如python或者JavaScript，而不是用来渲染HTML的。
解决方法很简单，就是不要试图在Sublime Text内部“运行”HTML。Sublime Text的作用是编辑代码，浏览器的作用是显示网页。
如何使用Sublime Text插件实现HTML实时预览
实时预览可以极大地提高开发效率。LiveReload是一个流行的Sublime Text插件，可以实现这个功能。
-
安装Package Control： 如果你还没有安装Package Control，先安装它。这是Sublime Text的包管理器，可以方便地安装、更新和卸载插件。
-
安装LiveReload： 打开Package Control（Ctrl+Shift+P或Cmd+Shift+P），输入Install Package，然后搜索LiveReload并安装。
-
安装浏览器扩展： LiveReload还需要一个浏览器扩展。在chrome网上应用店或者firefox附加组件商店搜索LiveReload并安装。
-
启用LiveReload： 在Sublime Text中打开你的HTML文件，按下Ctrl+Shift+P（或Cmd+Shift+P），输入LiveReload: Enable/Disable Plug-ins，选择Enable – Simple Reloads。
-
开始实时预览： 在浏览器中打开你的HTML文件，点击LiveReload扩展的图标，启用LiveReload。现在，当你修改并保存HTML文件时，浏览器会自动刷新，显示最新的效果。
Sublime Text如何调试JavaScript代码
虽然Sublime Text不能直接运行HTML，但它可以很好地支持JavaScript调试。你可以使用浏览器的开发者工具来调试JavaScript代码。
-
打开开发者工具： 在Chrome中，按下F12或者右键点击页面，选择“检查”。在Firefox中，按下F12或者右键点击页面，选择“检查元素”。
-
设置断点： 在开发者工具的“Sources”面板中，找到你的JavaScript文件，点击行号设置断点。当代码执行到断点时，会暂停执行，你可以查看变量的值，单步执行代码，等等。
-
使用console.log： 在JavaScript代码中使用console.log()语句，将信息输出到开发者工具的“Console”面板。这是一种简单有效的调试方法。
Sublime Text配置代码片段（Snippets）提高HTML编写效率
Sublime Text的代码片段功能可以让你快速插入常用的代码块，极大地提高编写HTML代码的效率。
-
创建代码片段： 选择Tools -> Developer -> New Snippet…。
-
编写代码片段： 在新的文件中，输入你的代码片段。例如，创建一个基本的HTML结构的代码片段：
<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>${1:Document}</title> </head> <body> ${2} </body> </html> ]]></content> <tabTrigger>html5</tabTrigger> <description>HTML5 Boilerplate</description> </snippet>
-
保存代码片段： 将文件保存为.sublime-snippet格式，例如html5.sublime-snippet。
-
使用代码片段： 在Sublime Text中输入html5，然后按下Tab键，就可以插入HTML5的骨架代码。${1:Document}和${2}是占位符，你可以按下Tab键在它们之间切换，并输入你想要的内容。
