25

Chrome workspaces : 로컬 CSS 파일을 로컬 http 서버에서 제공하는 파일에 매핑한다고 가정 해 봅니다. 모든 것이 잘 작동하고 브라우저에서 파일을 수정할 수 있으며 페이지를 새로 고칠 때 변경 사항이 지속됩니다.지문이 새겨진 Chrome 작업 영역

Google은 자산을 지문으로 채우므로 styles.css?longuniquehash과 같은 URL을 통해 참조됩니다. 훌륭한 방법 - 공격적인 캐싱을 사용할 수 있고 가장 최근의 자산이 클라이언트에 의해 사용되도록 할 수 있습니다.

그러나 URL이 업데이트 될 때마다 매핑이 ​​손실되므로 작업 영역에 약간의 문제가 있습니다. 간단히 말해 : styles.css?123을 로컬 리소스에 매핑하면 변경되고 페이지 새로 고침시 다시 매핑해야하는 styles.css?234으로 돌아옵니다.

우리는 cassette을 사용하고 있지만이 문제는 지문을 사용하는 모든 설정에서 재현 할 수 있습니다. 내가 놓친 설정이나 해결 방법이 있습니까?

+4

,이 카세트를 지원하지 않습니다 - 문제는 아직 열려 있습니다. chrome extension api에 대해서도 알아볼 가치가 있습니다. 그들은 요청하기 전에 URL을 다시 작성 .. – bushed

+0

@bushed : 흠, 좋은 지적, 나는이 시나리오 (더 적은/sass 어쩌면)에 CSS에 대한 소스 맵을 사용하여 생각하지 않았습니다! –

답변

-1

라이브 서버에서 개발하지 않았다고 가정하고 (로컬 컴퓨터 또는 적어도 테스트 서버에서 실행을 중단 한 경우) 실제 환경에서만 "캐시 버스터 (cache buster)"를 활성화하십시오. 우리는 항상 모든 프로젝트에서 실행중인 환경을 신속하게 검사하므로 "? 123"쿼리를 추가하기 전에 확인하십시오. 나는 당신이 (당신이 아파치를 사용하는 경우) 당신은 또한 (즉, style.css?123) 크롬, 검색어 매개 변수와 매핑 된 URL에 대한 지원에했다 따라 htacces에

SetEnvIf Host 'local.domain.com' runenv=local 

RewriteCond %{ENV:runenv} ^local$ 
RewriteCond %{REQUEST_URI} .*\.css 
RewriteCond %{QUERY_STRING} !^$ 
RewriteRule ^(.*)$ /$1? [R=301,L] 
1

을이를 추가 할 수있는 코드에서이 문제를 해결하지 않는 것 크롬 49까지 부분적으로 만 - 완전히 제거 된 곳.

코드에서 매개 변수를 수동으로 제거 할 수없는 경우 일시적으로 해결 방법은 페이지가로드 된 후 Chrome 관리자의 스타일 시트 참조에서 ?123 매개 변수를 제거하는 것입니다. 그런 다음 작업 공간 매핑과 자동 새로 고침은 페이지를 다시로드 할 때까지 제대로 작동해야합니다.

당신은 스타와 여기에이 문제를 따를 수 : bugs.chromium.org

당신은 그러나 http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ 놀아 시도 할 수
+0

링크를 제공해 주셔서 감사합니다. 링크 href를 변경하면이 시나리오에서 작동하지 않을 것입니다. 왜냐하면 URL을 수정하면 리소스가 새 URL에서 다시로드되고 URL이 캐시가 파기되지 않기 때문입니다. –