🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 23 (from laksa009)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa023.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/\')), getAhrefsUnparsedNoserviceFromURL(\'https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/","crawl_time":1775868462,"first_indexed_time":1701821533,"http_code":200,"src_unparsed":"com,websensepro!\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/ s443","src_root_hash":"6206837464361898223","history_drop_reason":null,"meta_title":"How To Do A Diff in VS Code (Compare Files) - WebSensePro","meta_descriptions":["A quick and efficient way to compare two code files using Visual Studio Code. This handy feature can save you valuable time"],"attrs_boilerpipe_text":"How To Do A Diff in VS Code (Compare Files)\nIntroduction:\nWelcome to the channel, fellow developers! In today’s tutorial video, I’ll be guiding you through a quick and efficient way to compare two code files using\nVisual Studio Code\n. This handy feature can save you valuable time, especially when you’re navigating through extensive codebases or tracking modifications in specific files.\nTo begin, open Visual Studio Code and access the Explorer. You can do this by clicking on the Explorer button or using the shortcut\nCommand + Shift + E\n. Next, open the folder containing the code files you want to compare. For this demonstration, I’m comparing a banner image liquid file with a new file.\nVersatility in File Types\nIt’s essential to note that Visual Studio Code isn’t limited to comparing only Shopify liquid code files. Whether you’re working with PHP, CSS, HTML, or any other coding language, the process remains the same. This flexibility makes it a powerful tool for developers working on diverse projects.\nStep-by-Step Comparison\nOpen the Explorer.\nClick on “Open Folder” and select the folder containing the code files.\nRight-click on the first file, then select “Select for Compare.”\nClick on the second file, then choose “Compare with Selected.”\nUnderstanding the Comparison\nThe magic unfolds as Visual Studio Code presents a clear visual representation of the code changes. Red highlights signify alterations in line numbers, while green indicates additional code added to the file. This makes it easy to pinpoint modifications and understand the evolution of your codebase.\nConclusion\nIn under a minute, you’ve learned how to harness Visual Studio Code’s built-in functionality for comparing code files. This skill is not only valuable for personal projects but can significantly enhance collaboration in team settings.\n5\/5 - (5 votes)","attrs_markdown":"[Skip to content](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/#content)\n\n- [\\+1 (917) 730-2010](tel:+1\\(857\\)366-6800)\n- [\\[email protected\\]](https:\/\/websensepro.com\/cdn-cgi\/l\/email-protection#0c65626a634c7b696e7f69627f697c7e63226f6361)\n\n[Facebook-f](https:\/\/www.facebook.com\/websensepro)     [Linkedin-in](https:\/\/www.linkedin.com\/company\/websensepro\/)     [Instagram](https:\/\/www.instagram.com\/websensepro\/)     [Youtube](https:\/\/www.youtube.com\/channel\/UCloCjpFkjlNb_5Gz_bsg3uw\/)     [Tiktok](https:\/\/www.tiktok.com\/@websensepro)\n\n[![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/01\/3_f16e0d8105c8d73b52020c5b6012ba6c.png)](https:\/\/websensepro.com\/)\n\n- [ABOUT US](https:\/\/websensepro.com\/about-us\/)\n- OUR SERVICES\n  \n  Close OUR SERVICES    Open OUR SERVICES\n  ![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/08\/Untitled-1-1.png)\n  \n  ## Digital Marketing\n  - [Generative Engine Optimization](https:\/\/websensepro.com\/geo-generative-engine-optimization\/)\n  - [Search Engine Optimization](https:\/\/websensepro.com\/our-services\/search-engine-optimization\/)\n  - [Social Media Marketing](https:\/\/websensepro.com\/our-services\/social-media-marketing\/)\n  - [Pay Per Click Management](https:\/\/websensepro.com\/our-services\/pay-per-click-management\/)\n  \n  ![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/08\/Untitled-2-1.png)\n  \n  ## Web Development Service\n  - [Logo Design](https:\/\/websensepro.com\/our-services\/logo-design\/)\n  - [Custom Website Design and Development](https:\/\/websensepro.com\/our-services\/custom-website-design-development)\n  - [Shopify Web Design and Development](https:\/\/websensepro.com\/our-services\/shopify-web-design-and-development\/)\n  - [Domain and Hosting](https:\/\/domain.websensepro.com\/)\n  \n  ![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/08\/Wordpress-1.png)\n  \n  ## WordPress Development Service\n  - [Ecommerce Web Development](https:\/\/websensepro.com\/our-services\/ecommerce-web-development\/)\n  - [Web Design and Development](https:\/\/websensepro.com\/our-services\/web-design-and-development)\n  - [WordPress Development](https:\/\/websensepro.com\/our-services\/wordpress-development\/)\n  \n  ![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/08\/searchEnterpriseAI_052_searchsitetablet_520X173.png)\n  \n  ## Artificial Intelligence\n  - [AI Automation](https:\/\/websensepro.com\/our-services\/ai-automation\/)\n- [PORTFOLIO](https:\/\/websensepro.com\/portfolio\/)\n- [BLOG](https:\/\/websensepro.com\/blog\/)\n- [START NOW](https:\/\/websensepro.com\/getting-started\/)\n- [CLIENT TESTIMONIALS](https:\/\/websensepro.com\/client-testimonial\/)\n- [CONTACT US](https:\/\/websensepro.com\/contact-us\/)\n\n[![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/08\/3_f16e0d8105c8d73b52020c5b6012ba6c.png)](https:\/\/websensepro.com\/)\n\n- [About Us](https:\/\/websensepro.com\/about-us\/)\n- [Our Services](https:\/\/websensepro.com\/our-services\/)\n  - [Digital Marketing](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [Generative Engine Optimization](https:\/\/websensepro.com\/geo-generative-engine-optimization\/)\n    - [Search Engine Optimization](https:\/\/websensepro.com\/our-services\/search-engine-optimization\/)\n    - [Social Media Marketing](https:\/\/websensepro.com\/our-services\/social-media-marketing\/)\n    - [Pay Per Click Management](https:\/\/websensepro.com\/our-services\/pay-per-click-management\/)\n  - [Web Development Services](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [Custom Website Design and Development](https:\/\/websensepro.com\/our-services\/custom-website-design-development)\n    - [Logo Design](https:\/\/websensepro.com\/our-services\/logo-design\/)\n  - [WordPress Development Services](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [Web Design and Development](https:\/\/websensepro.com\/our-services\/web-design-and-development)\n    - [Ecommerce Web Development](https:\/\/websensepro.com\/our-services\/ecommerce-web-development\/)\n    - [WordPress Development](https:\/\/websensepro.com\/our-services\/wordpress-development\/)\n  - [Artificial Intelligence](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [AI Automation](https:\/\/websensepro.com\/our-services\/ai-automation\/)\n- [Portfolio](https:\/\/websensepro.com\/portfolio\/)\n- [Blog](https:\/\/websensepro.com\/blog\/)\n- [Start Now](https:\/\/websensepro.com\/getting-started\/)\n- [Client Testimonials](https:\/\/websensepro.com\/client-testimonial\/)\n- [Contact Us](https:\/\/websensepro.com\/contact-us\/)\n\n- [About Us](https:\/\/websensepro.com\/about-us\/)\n- [Our Services](https:\/\/websensepro.com\/our-services\/)\n  - [Digital Marketing](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [Generative Engine Optimization](https:\/\/websensepro.com\/geo-generative-engine-optimization\/)\n    - [Search Engine Optimization](https:\/\/websensepro.com\/our-services\/search-engine-optimization\/)\n    - [Social Media Marketing](https:\/\/websensepro.com\/our-services\/social-media-marketing\/)\n    - [Pay Per Click Management](https:\/\/websensepro.com\/our-services\/pay-per-click-management\/)\n  - [Web Development Services](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [Custom Website Design and Development](https:\/\/websensepro.com\/our-services\/custom-website-design-development)\n    - [Logo Design](https:\/\/websensepro.com\/our-services\/logo-design\/)\n  - [WordPress Development Services](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [Web Design and Development](https:\/\/websensepro.com\/our-services\/web-design-and-development)\n    - [Ecommerce Web Development](https:\/\/websensepro.com\/our-services\/ecommerce-web-development\/)\n    - [WordPress Development](https:\/\/websensepro.com\/our-services\/wordpress-development\/)\n  - [Artificial Intelligence](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/)\n    - [AI Automation](https:\/\/websensepro.com\/our-services\/ai-automation\/)\n- [Portfolio](https:\/\/websensepro.com\/portfolio\/)\n- [Blog](https:\/\/websensepro.com\/blog\/)\n- [Start Now](https:\/\/websensepro.com\/getting-started\/)\n- [Client Testimonials](https:\/\/websensepro.com\/client-testimonial\/)\n- [Contact Us](https:\/\/websensepro.com\/contact-us\/)\n### How To Do A Diff in VS Code (Compare Files)\n\n# How To Do A Diff in VS Code (Compare Files)\n## **How To Do A Diff in VS Code (Compare Files)**\n**Introduction:** Welcome to the channel, fellow developers! In today’s tutorial video, I’ll be guiding you through a quick and efficient way to compare two code files using [Visual Studio Code](https:\/\/youtu.be\/jrmJ4-dOwBw). This handy feature can save you valuable time, especially when you’re navigating through extensive codebases or tracking modifications in specific files.  \nTo begin, open Visual Studio Code and access the Explorer. You can do this by clicking on the Explorer button or using the shortcut `Command + Shift + E`. Next, open the folder containing the code files you want to compare. For this demonstration, I’m comparing a banner image liquid file with a new file.\n\n**Versatility in File Types** It’s essential to note that Visual Studio Code isn’t limited to comparing only Shopify liquid code files. Whether you’re working with PHP, CSS, HTML, or any other coding language, the process remains the same. This flexibility makes it a powerful tool for developers working on diverse projects.\n\n**Step-by-Step Comparison**\n\n1. Open the Explorer.\n2. Click on “Open Folder” and select the folder containing the code files.\n3. Right-click on the first file, then select “Select for Compare.”\n4. Click on the second file, then choose “Compare with Selected.”\n\n**Understanding the Comparison** The magic unfolds as Visual Studio Code presents a clear visual representation of the code changes. Red highlights signify alterations in line numbers, while green indicates additional code added to the file. This makes it easy to pinpoint modifications and understand the evolution of your codebase.\n\n**Conclusion** In under a minute, you’ve learned how to harness Visual Studio Code’s built-in functionality for comparing code files. This skill is not only valuable for personal projects but can significantly enhance collaboration in team settings.\n\n5\/5 - (5 votes)\n\n## About\n#### admin\n![Picture of admin](https:\/\/secure.gravatar.com\/avatar\/21f9c275199281ec084a7b1e85fb22604271045ede962df5f94ce572a22871a4?s=300&d=mm&r=g)\n### Leave a Comment [Cancel Reply](https:\/\/websensepro.com\/blog\/how-to-do-a-diff-in-vs-code-compare-files\/#respond)\n\n## OUR SERVICES\n- [AI Automation](https:\/\/websensepro.com\/our-services\/ai-automation\/)\n- [Shopify Design and Development](https:\/\/websensepro.com\/our-services\/shopify-web-design-and-development\/)\n- [Web Design and Development](https:\/\/websensepro.com\/our-services\/web-design-and-development)\n- [WordPress Development](https:\/\/websensepro.com\/our-services\/wordpress-development\/)\n- [Ecommerce Web Development](https:\/\/websensepro.com\/our-services\/ecommerce-web-development\/)\n- [Search Engine Optimization](https:\/\/websensepro.com\/our-services\/search-engine-optimization\/)\n- [Generative Engine Optimization](https:\/\/websensepro.com\/geo-generative-engine-optimization\/)\n- [Logo Design](https:\/\/websensepro.com\/our-services\/logo-design\/)\n\n## CONTACT INFO\n- WebSensePro LLC\n- [\\+1 (857) 366-6800](tel:+1%20\\(857\\)%20366-6800)\n- [\\+1 (917) 730-2010](tel:+1%20\\(857\\)%20366-6800)\n- [\\[email protected\\]](https:\/\/websensepro.com\/cdn-cgi\/l\/email-protection#731a1d151c3304161100161d001603011c5d101c1e)\n- <https:\/\/websensepro.com>\n- 1500 N Grant St Ste R, Denver, CO 80203\n- 212-20 Jamaica Ave Queens Village NY 11428\n\n## FOLLOW US ON\n[Facebook-f](https:\/\/www.facebook.com\/websensepro)     [Linkedin-in](https:\/\/www.linkedin.com\/company\/websensepro\/)     [Instagram](https:\/\/www.instagram.com\/websensepro\/)     [Youtube](https:\/\/www.youtube.com\/c\/websensepro?sub_confirmation=1)     [Tiktok](https:\/\/www.tiktok.com\/@websensepro)\n\n[![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/01\/Shopify-Certified-Partner-Logo.png)](https:\/\/www.shopify.com\/partners\/directory\/partner\/websensepro1)\n\n![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/01\/channelwill-logo.13a49147.png)\n\nAgency Partner\n\n![](https:\/\/websensepro.com\/wp-content\/uploads\/2019\/01\/Shopify-Certified-Partner-Logo-150x150.png)\n\nCopyright All Rights Reserved © 2026\n\n- [Refund Policy](https:\/\/websensepro.com\/refund-policy\/)\n- [Terms and Conditions](https:\/\/websensepro.com\/terms-and-conditions\/)\n- [Privacy Policy](https:\/\/websensepro.com\/privacy-policy\/)","attrs_readable_markdown":"## **How To Do A Diff in VS Code (Compare Files)**\n**Introduction:** Welcome to the channel, fellow developers! In today’s tutorial video, I’ll be guiding you through a quick and efficient way to compare two code files using [Visual Studio Code](https:\/\/youtu.be\/jrmJ4-dOwBw). This handy feature can save you valuable time, especially when you’re navigating through extensive codebases or tracking modifications in specific files.  \nTo begin, open Visual Studio Code and access the Explorer. You can do this by clicking on the Explorer button or using the shortcut `Command + Shift + E`. Next, open the folder containing the code files you want to compare. For this demonstration, I’m comparing a banner image liquid file with a new file.\n\n**Versatility in File Types** It’s essential to note that Visual Studio Code isn’t limited to comparing only Shopify liquid code files. Whether you’re working with PHP, CSS, HTML, or any other coding language, the process remains the same. This flexibility makes it a powerful tool for developers working on diverse projects.\n\n**Step-by-Step Comparison**\n\n1. Open the Explorer.\n2. Click on “Open Folder” and select the folder containing the code files.\n3. Right-click on the first file, then select “Select for Compare.”\n4. Click on the second file, then choose “Compare with Selected.”\n\n**Understanding the Comparison** The magic unfolds as Visual Studio Code presents a clear visual representation of the code changes. Red highlights signify alterations in line numbers, while green indicates additional code added to the file. This makes it easy to pinpoint modifications and understand the evolution of your codebase.\n\n**Conclusion** In under a minute, you’ve learned how to harness Visual Studio Code’s built-in functionality for comparing code files. This skill is not only valuable for personal projects but can significantly enhance collaboration in team settings.\n\n5\/5 - (5 votes)","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

4 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.2 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/
Last Crawled	2026-04-11 00:47:42 (4 days ago)
First Indexed	2023-12-06 00:12:13 (2 years ago)
HTTP Status Code	200
Meta Title	How To Do A Diff in VS Code (Compare Files) - WebSensePro
Meta Description	A quick and efficient way to compare two code files using Visual Studio Code. This handy feature can save you valuable time
Meta Canonical	null
Boilerpipe Text	How To Do A Diff in VS Code (Compare Files) Introduction: Welcome to the channel, fellow developers! In today’s tutorial video, I’ll be guiding you through a quick and efficient way to compare two code files using Visual Studio Code . This handy feature can save you valuable time, especially when you’re navigating through extensive codebases or tracking modifications in specific files. To begin, open Visual Studio Code and access the Explorer. You can do this by clicking on the Explorer button or using the shortcut Command + Shift + E . Next, open the folder containing the code files you want to compare. For this demonstration, I’m comparing a banner image liquid file with a new file. Versatility in File Types It’s essential to note that Visual Studio Code isn’t limited to comparing only Shopify liquid code files. Whether you’re working with PHP, CSS, HTML, or any other coding language, the process remains the same. This flexibility makes it a powerful tool for developers working on diverse projects. Step-by-Step Comparison Open the Explorer. Click on “Open Folder” and select the folder containing the code files. Right-click on the first file, then select “Select for Compare.” Click on the second file, then choose “Compare with Selected.” Understanding the Comparison The magic unfolds as Visual Studio Code presents a clear visual representation of the code changes. Red highlights signify alterations in line numbers, while green indicates additional code added to the file. This makes it easy to pinpoint modifications and understand the evolution of your codebase. Conclusion In under a minute, you’ve learned how to harness Visual Studio Code’s built-in functionality for comparing code files. This skill is not only valuable for personal projects but can significantly enhance collaboration in team settings. 5/5 - (5 votes)
Markdown	[Skip to content](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/#content) - [\+1 (917) 730-2010](tel:+1\(857\)366-6800) - [\[email protected\]](https://websensepro.com/cdn-cgi/l/email-protection#0c65626a634c7b696e7f69627f697c7e63226f6361) [Facebook-f](https://www.facebook.com/websensepro) [Linkedin-in](https://www.linkedin.com/company/websensepro/) [Instagram](https://www.instagram.com/websensepro/) [Youtube](https://www.youtube.com/channel/UCloCjpFkjlNb_5Gz_bsg3uw/) [Tiktok](https://www.tiktok.com/@websensepro) [![](https://websensepro.com/wp-content/uploads/2019/01/3_f16e0d8105c8d73b52020c5b6012ba6c.png)](https://websensepro.com/) - [ABOUT US](https://websensepro.com/about-us/) - OUR SERVICES Close OUR SERVICES Open OUR SERVICES ![](https://websensepro.com/wp-content/uploads/2019/08/Untitled-1-1.png) ## Digital Marketing - [Generative Engine Optimization](https://websensepro.com/geo-generative-engine-optimization/) - [Search Engine Optimization](https://websensepro.com/our-services/search-engine-optimization/) - [Social Media Marketing](https://websensepro.com/our-services/social-media-marketing/) - [Pay Per Click Management](https://websensepro.com/our-services/pay-per-click-management/) ![](https://websensepro.com/wp-content/uploads/2019/08/Untitled-2-1.png) ## Web Development Service - [Logo Design](https://websensepro.com/our-services/logo-design/) - [Custom Website Design and Development](https://websensepro.com/our-services/custom-website-design-development) - [Shopify Web Design and Development](https://websensepro.com/our-services/shopify-web-design-and-development/) - [Domain and Hosting](https://domain.websensepro.com/) ![](https://websensepro.com/wp-content/uploads/2019/08/Wordpress-1.png) ## WordPress Development Service - [Ecommerce Web Development](https://websensepro.com/our-services/ecommerce-web-development/) - [Web Design and Development](https://websensepro.com/our-services/web-design-and-development) - [WordPress Development](https://websensepro.com/our-services/wordpress-development/) ![](https://websensepro.com/wp-content/uploads/2019/08/searchEnterpriseAI_052_searchsitetablet_520X173.png) ## Artificial Intelligence - [AI Automation](https://websensepro.com/our-services/ai-automation/) - [PORTFOLIO](https://websensepro.com/portfolio/) - [BLOG](https://websensepro.com/blog/) - [START NOW](https://websensepro.com/getting-started/) - [CLIENT TESTIMONIALS](https://websensepro.com/client-testimonial/) - [CONTACT US](https://websensepro.com/contact-us/) [![](https://websensepro.com/wp-content/uploads/2019/08/3_f16e0d8105c8d73b52020c5b6012ba6c.png)](https://websensepro.com/) - [About Us](https://websensepro.com/about-us/) - [Our Services](https://websensepro.com/our-services/) - [Digital Marketing](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [Generative Engine Optimization](https://websensepro.com/geo-generative-engine-optimization/) - [Search Engine Optimization](https://websensepro.com/our-services/search-engine-optimization/) - [Social Media Marketing](https://websensepro.com/our-services/social-media-marketing/) - [Pay Per Click Management](https://websensepro.com/our-services/pay-per-click-management/) - [Web Development Services](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [Custom Website Design and Development](https://websensepro.com/our-services/custom-website-design-development) - [Logo Design](https://websensepro.com/our-services/logo-design/) - [WordPress Development Services](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [Web Design and Development](https://websensepro.com/our-services/web-design-and-development) - [Ecommerce Web Development](https://websensepro.com/our-services/ecommerce-web-development/) - [WordPress Development](https://websensepro.com/our-services/wordpress-development/) - [Artificial Intelligence](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [AI Automation](https://websensepro.com/our-services/ai-automation/) - [Portfolio](https://websensepro.com/portfolio/) - [Blog](https://websensepro.com/blog/) - [Start Now](https://websensepro.com/getting-started/) - [Client Testimonials](https://websensepro.com/client-testimonial/) - [Contact Us](https://websensepro.com/contact-us/) - [About Us](https://websensepro.com/about-us/) - [Our Services](https://websensepro.com/our-services/) - [Digital Marketing](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [Generative Engine Optimization](https://websensepro.com/geo-generative-engine-optimization/) - [Search Engine Optimization](https://websensepro.com/our-services/search-engine-optimization/) - [Social Media Marketing](https://websensepro.com/our-services/social-media-marketing/) - [Pay Per Click Management](https://websensepro.com/our-services/pay-per-click-management/) - [Web Development Services](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [Custom Website Design and Development](https://websensepro.com/our-services/custom-website-design-development) - [Logo Design](https://websensepro.com/our-services/logo-design/) - [WordPress Development Services](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [Web Design and Development](https://websensepro.com/our-services/web-design-and-development) - [Ecommerce Web Development](https://websensepro.com/our-services/ecommerce-web-development/) - [WordPress Development](https://websensepro.com/our-services/wordpress-development/) - [Artificial Intelligence](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/) - [AI Automation](https://websensepro.com/our-services/ai-automation/) - [Portfolio](https://websensepro.com/portfolio/) - [Blog](https://websensepro.com/blog/) - [Start Now](https://websensepro.com/getting-started/) - [Client Testimonials](https://websensepro.com/client-testimonial/) - [Contact Us](https://websensepro.com/contact-us/) ### How To Do A Diff in VS Code (Compare Files) # How To Do A Diff in VS Code (Compare Files) ## How To Do A Diff in VS Code (Compare Files) Introduction: Welcome to the channel, fellow developers! In today’s tutorial video, I’ll be guiding you through a quick and efficient way to compare two code files using [Visual Studio Code](https://youtu.be/jrmJ4-dOwBw). This handy feature can save you valuable time, especially when you’re navigating through extensive codebases or tracking modifications in specific files. To begin, open Visual Studio Code and access the Explorer. You can do this by clicking on the Explorer button or using the shortcut `Command + Shift + E`. Next, open the folder containing the code files you want to compare. For this demonstration, I’m comparing a banner image liquid file with a new file. Versatility in File Types It’s essential to note that Visual Studio Code isn’t limited to comparing only Shopify liquid code files. Whether you’re working with PHP, CSS, HTML, or any other coding language, the process remains the same. This flexibility makes it a powerful tool for developers working on diverse projects. Step-by-Step Comparison 1. Open the Explorer. 2. Click on “Open Folder” and select the folder containing the code files. 3. Right-click on the first file, then select “Select for Compare.” 4. Click on the second file, then choose “Compare with Selected.” Understanding the Comparison The magic unfolds as Visual Studio Code presents a clear visual representation of the code changes. Red highlights signify alterations in line numbers, while green indicates additional code added to the file. This makes it easy to pinpoint modifications and understand the evolution of your codebase. Conclusion In under a minute, you’ve learned how to harness Visual Studio Code’s built-in functionality for comparing code files. This skill is not only valuable for personal projects but can significantly enhance collaboration in team settings. 5/5 - (5 votes) ## About #### admin ![Picture of admin](https://secure.gravatar.com/avatar/21f9c275199281ec084a7b1e85fb22604271045ede962df5f94ce572a22871a4?s=300&d=mm&r=g) ### Leave a Comment [Cancel Reply](https://websensepro.com/blog/how-to-do-a-diff-in-vs-code-compare-files/#respond) ## OUR SERVICES - [AI Automation](https://websensepro.com/our-services/ai-automation/) - [Shopify Design and Development](https://websensepro.com/our-services/shopify-web-design-and-development/) - [Web Design and Development](https://websensepro.com/our-services/web-design-and-development) - [WordPress Development](https://websensepro.com/our-services/wordpress-development/) - [Ecommerce Web Development](https://websensepro.com/our-services/ecommerce-web-development/) - [Search Engine Optimization](https://websensepro.com/our-services/search-engine-optimization/) - [Generative Engine Optimization](https://websensepro.com/geo-generative-engine-optimization/) - [Logo Design](https://websensepro.com/our-services/logo-design/) ## CONTACT INFO - WebSensePro LLC - [\+1 (857) 366-6800](tel:+1%20\(857\)%20366-6800) - [\+1 (917) 730-2010](tel:+1%20\(857\)%20366-6800) - [\[email protected\]](https://websensepro.com/cdn-cgi/l/email-protection#731a1d151c3304161100161d001603011c5d101c1e) - <https://websensepro.com> - 1500 N Grant St Ste R, Denver, CO 80203 - 212-20 Jamaica Ave Queens Village NY 11428 ## FOLLOW US ON [Facebook-f](https://www.facebook.com/websensepro) [Linkedin-in](https://www.linkedin.com/company/websensepro/) [Instagram](https://www.instagram.com/websensepro/) [Youtube](https://www.youtube.com/c/websensepro?sub_confirmation=1) [Tiktok](https://www.tiktok.com/@websensepro) [![](https://websensepro.com/wp-content/uploads/2019/01/Shopify-Certified-Partner-Logo.png)](https://www.shopify.com/partners/directory/partner/websensepro1) ![](https://websensepro.com/wp-content/uploads/2019/01/channelwill-logo.13a49147.png) Agency Partner ![](https://websensepro.com/wp-content/uploads/2019/01/Shopify-Certified-Partner-Logo-150x150.png) Copyright All Rights Reserved © 2026 - [Refund Policy](https://websensepro.com/refund-policy/) - [Terms and Conditions](https://websensepro.com/terms-and-conditions/) - [Privacy Policy](https://websensepro.com/privacy-policy/)
Readable Markdown	## How To Do A Diff in VS Code (Compare Files) Introduction: Welcome to the channel, fellow developers! In today’s tutorial video, I’ll be guiding you through a quick and efficient way to compare two code files using [Visual Studio Code](https://youtu.be/jrmJ4-dOwBw). This handy feature can save you valuable time, especially when you’re navigating through extensive codebases or tracking modifications in specific files. To begin, open Visual Studio Code and access the Explorer. You can do this by clicking on the Explorer button or using the shortcut `Command + Shift + E`. Next, open the folder containing the code files you want to compare. For this demonstration, I’m comparing a banner image liquid file with a new file. Versatility in File Types It’s essential to note that Visual Studio Code isn’t limited to comparing only Shopify liquid code files. Whether you’re working with PHP, CSS, HTML, or any other coding language, the process remains the same. This flexibility makes it a powerful tool for developers working on diverse projects. Step-by-Step Comparison 1. Open the Explorer. 2. Click on “Open Folder” and select the folder containing the code files. 3. Right-click on the first file, then select “Select for Compare.” 4. Click on the second file, then choose “Compare with Selected.” Understanding the Comparison The magic unfolds as Visual Studio Code presents a clear visual representation of the code changes. Red highlights signify alterations in line numbers, while green indicates additional code added to the file. This makes it easy to pinpoint modifications and understand the evolution of your codebase. Conclusion In under a minute, you’ve learned how to harness Visual Studio Code’s built-in functionality for comparing code files. This skill is not only valuable for personal projects but can significantly enhance collaboration in team settings. 5/5 - (5 votes)
Shard	23 (laksa)
Root Hash	6206837464361898223
Unparsed URL	com,websensepro!/blog/how-to-do-a-diff-in-vs-code-compare-files/ s443