Sitecore Experience Editor unknown JSON error

In our recent Sitecore 10.2 development, we found that my experience editor was not working properly. Because in the general case when we create any view or controller rendering and use proper experience editor syntax it works fine. But here I was facing some weird issues when I opened an editor.

Please refer below to the or text for more information because it is stating that some chrome placeholder or png image was missing but we were not sure what.

In experience editor, I have faced an issue just as below figure. I got a response of unknown JSON data on the whole page.

{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{2C910DC6-408B-42F4-A84D-66C1CDF5839D}?lang=en&ver=30","custom":{"allowedRenderings":[],"editable":"false"},"displayName":"header","expandedDisplayName":null}{"commands":[{"click":"chrome:rendering:sort","header":"Change
                        

Investing many hours I compared other machine’s instances and found that one CSS is missing from my instance named “webedit.css”. I got this CSS from the Sitecore installation package.

Path of the CSS: C:\inetpub\wwwroot\instancename

After adding this CSS file to my root folder and resetting the IIS and checking the page component once again now my experience editor is working fine.